@tarojs/plugin-http 3.8.0-canary.0 → 4.0.0-alpha.2

package/LICENSE

@@ -158,3 +158,17 @@ MIT (stencil-vue2-output-target):
 The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
 `/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
 See `/LICENSE` for details of the license.
+
+==================
+
+MIT (weui):
+The following files embed [stencil-vue2-output-target](https://github.com/Tencent/weui) MIT:
+`/packages/taro-components/src/components/*.scss`
+See `/LICENSE.txt` for details of the license.
+
+==================
+
+Apache-2.0 (intersection-observer):
+The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
+`/packages/taro-api/src/polyfill/intersection-observer.ts`
+See `/LICENSE.txt` for details of the license.

package/dist/runtime.d.ts

@@ -58,7 +58,10 @@ declare class XMLHttpRequest extends Events {
     // 欺骗一些库让其认为是原生的xhr
     static toString(): string;
     toString(): string;
-    // 事件
+    // 事件正常流转： loadstart => progress（可能多次） => load => loadend
+    // error 流转： loadstart => error => loadend
+    // abort 流转： loadstart => abort => loadend
+    // web在线测试： https://developer.mozilla.org/zh-CN/play
     /** 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时 */
     onabort: ((e: XMLHttpRequestEvent) => void) | null;
     /** 当 request 遭遇错误时触发 */

package/dist/runtime.js

@@ -1,7 +1,7 @@
 import { parseUrl, Events, createEvent, window, document } from '@tarojs/runtime';
 export { document } from '@tarojs/runtime';
-import { isString, isFunction, isWebPlatform } from '@tarojs/shared';
 import { setStorage, getStorageSync, request } from '@tarojs/taro';
+import { isString, isFunction } from '@tarojs/shared';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -17,7 +17,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __classPrivateFieldGet(receiver, state, kind, f) {
@@ -31,7 +31,12 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var _Cookie_map;
 const STORAGE_KEY = 'PAGE_COOKIE';
@@ -406,7 +411,10 @@ class XMLHttpRequest extends Events {
         _XMLHttpRequest_timeout.set(this, void 0);
         _XMLHttpRequest_withCredentials.set(this, void 0);
         _XMLHttpRequest_requestTask.set(this, void 0);
-        // 事件
+        // 事件正常流转： loadstart => progress（可能多次） => load => loadend
+        // error 流转： loadstart => error => loadend
+        // abort 流转： loadstart => abort => loadend
+        // web在线测试： https://developer.mozilla.org/zh-CN/play
         /** 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时 */
         this.onabort = null;
         /** 当 request 遭遇错误时触发 */
@@ -577,6 +585,7 @@ _XMLHttpRequest_method = new WeakMap(), _XMLHttpRequest_url = new WeakMap(), _XM
     // 头信息
     const header = Object.assign({}, __classPrivateFieldGet(this, _XMLHttpRequest_header, "f"));
     // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies
+    // @ts-ignore
     header.cookie = window.document.$$cookie;
     if (!this.withCredentials) {
         // 不同源，要求 withCredentials 为 true 才携带 cookie
@@ -606,7 +615,7 @@ _XMLHttpRequest_method = new WeakMap(), _XMLHttpRequest_url = new WeakMap(), _XM
     __classPrivateFieldGet(this, _XMLHttpRequest_instances, "m", _XMLHttpRequest_callReadyStateChange).call(this, XMLHttpRequest.HEADERS_RECEIVED);
     if (ENABLE_COOKIE) {
         // 处理 set-cookie
-        const setCookieStr = header['Set-Cookie'];
+        const setCookieStr = this.getResponseHeader('set-cookie');
         if (setCookieStr && typeof setCookieStr === 'string') {
             let start = 0;
             let startSplit = 0;
@@ -634,17 +643,40 @@ _XMLHttpRequest_method = new WeakMap(), _XMLHttpRequest_url = new WeakMap(), _XM
     // 处理返回数据
     if (data) {
         __classPrivateFieldGet(this, _XMLHttpRequest_instances, "m", _XMLHttpRequest_callReadyStateChange).call(this, XMLHttpRequest.LOADING);
-        const loadstartEvent = createXMLHttpRequestEvent('loadstart', this, header['Content-Length']);
+        const contentLength = Number(this.getResponseHeader('content-length') || 0);
+        const loadstartEvent = createXMLHttpRequestEvent('loadstart', this, contentLength);
         this.trigger('loadstart', loadstartEvent);
         isFunction(this.onloadstart) && this.onloadstart(loadstartEvent);
         __classPrivateFieldSet(this, _XMLHttpRequest_response, data, "f");
-        const loadEvent = createXMLHttpRequestEvent('load', this, header['Content-Length']);
+        const loadEvent = createXMLHttpRequestEvent('load', this, contentLength);
         this.trigger('load', loadEvent);
         isFunction(this.onload) && this.onload(loadEvent);
     }
 }, _XMLHttpRequest_requestFail = function _XMLHttpRequest_requestFail(err) {
+    // 微信小程序，无论接口返回200还是其他，响应无论是否有错误，都会进入 success 回调；只有类似超时这种请求错误才会进入 fail 回调
+    //
+    /**
+     * 阿里系小程序，接口返回非200状态码，会进入 fail 回调, 此时 err 对象结构如下（当错误码为 14 或 19 时，会多返回 status、data、headers。可通过这些字段获取服务端相关错误信息）：
+     {
+       data: "{\"code\": 401,\"msg\":\"登录过期，请重新登录\"}"
+       error: 19
+       errorMessage: "http status error"
+       headers: {date: 'Mon, 14 Aug 2023 08:54:58 GMT', content-type: 'application/json;charset=UTF-8', content-length: '52', connection: 'close', access-control-allow-credentials: 'true', …}
+       originalData: "{\"code\": 401,\"msg\":\"登录过期，请重新登录\"}"
+       status: 401
+     }
+     */
+    // 统一行为，能正常响应的，都算 success.
+    if (err.status) {
+        __classPrivateFieldGet(this, _XMLHttpRequest_instances, "m", _XMLHttpRequest_requestSuccess).call(this, {
+            data: err,
+            statusCode: err.status,
+            header: err.headers
+        });
+        return;
+    }
     __classPrivateFieldSet(this, _XMLHttpRequest_status, 0, "f");
-    __classPrivateFieldSet(this, _XMLHttpRequest_statusText, err.errMsg, "f");
+    __classPrivateFieldSet(this, _XMLHttpRequest_statusText, err.errMsg || err.errorMessage, "f");
     const errorEvent = createXMLHttpRequestEvent('error', this, 0);
     this.trigger('error', errorEvent);
     isFunction(this.onerror) && this.onerror(errorEvent);
@@ -652,7 +684,8 @@ _XMLHttpRequest_method = new WeakMap(), _XMLHttpRequest_url = new WeakMap(), _XM
     __classPrivateFieldSet(this, _XMLHttpRequest_requestTask, null, "f");
     __classPrivateFieldGet(this, _XMLHttpRequest_instances, "m", _XMLHttpRequest_callReadyStateChange).call(this, XMLHttpRequest.DONE);
     if (__classPrivateFieldGet(this, _XMLHttpRequest_status, "f")) {
-        const loadendEvent = createXMLHttpRequestEvent('loadend', this, __classPrivateFieldGet(this, _XMLHttpRequest_header, "f")['Content-Length']);
+        const contentLength = Number(this.getResponseHeader('content-length') || 0);
+        const loadendEvent = createXMLHttpRequestEvent('loadend', this, contentLength);
         this.trigger('loadend', loadendEvent);
         isFunction(this.onloadend) && this.onloadend(loadendEvent);
     }
@@ -663,7 +696,7 @@ XMLHttpRequest.HEADERS_RECEIVED = 2;
 XMLHttpRequest.LOADING = 3;
 XMLHttpRequest.DONE = 4;
 
-if (!isWebPlatform()) {
+if (process.env.TARO_PLATFORM !== 'web') {
     if (ENABLE_COOKIE) {
         const _cookie = createCookieInstance();
         Object.defineProperties(document, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-http",
-  "version": "3.8.0-canary.0",
+  "version": "4.0.0-alpha.2",
   "description": "Taro 小程序端支持使用 web 请求 的插件",
   "main": "index.js",
   "files": [
@@ -23,12 +23,12 @@
   },
   "homepage": "https://github.com/NervJS/taro#readme",
   "dependencies": {
-    "@tarojs/runtime": "3.8.0-canary.0",
-    "@tarojs/service": "3.8.0-canary.0",
-    "@tarojs/shared": "3.8.0-canary.0"
+    "@tarojs/shared": "4.0.0-alpha.2",
+    "@tarojs/service": "4.0.0-alpha.2",
+    "@tarojs/runtime": "4.0.0-alpha.2"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",
@@ -37,13 +37,13 @@
     "rollup-plugin-node-externals": "^5.0.0",
     "rollup-plugin-ts": "^3.0.2",
     "ts-jest": "^29.0.5",
-    "tslib": "^2.5.0",
+    "tslib": "^2.6.2",
     "typescript": "^4.7.4"
   },
   "scripts": {
     "dev": "rollup -c -w --bundleConfigAsCjs",
     "build": "rollup -c --bundleConfigAsCjs",
     "test": "jest",
-    "test:ci": "jest --ci -i --coverage false"
+    "test:ci": "jest --ci -i --coverage --silent"
   }
 }

package/src/__tests__/dom.spec.js

@@ -3,7 +3,7 @@ describe('DOM', () => {
   const runtime = require('../../dist/runtime')
   const document = runtime.document
   global.document = runtime.document
-  
+
   describe('document', () => {
 
     it('document setCookie', async () => {
@@ -15,6 +15,5 @@ describe('DOM', () => {
         'aaa=1111-2222-33-444-abcdefgasd; bbb=23123-aswe-4a7a-a740-f55dfd296b1d; ccc=69asd3d81234668942'
       )
     })
-    
   })
 })

package/src/__tests__/xhr.spec.ts

@@ -0,0 +1,101 @@
+import { window } from '@tarojs/runtime'
+import { request, RequestTask } from '@tarojs/taro'
+
+import { XMLHttpRequest, XMLHttpRequestEvent } from '../../dist/runtime'
+
+jest.mock('@tarojs/taro', () => {
+  return {
+    request: jest.fn(),
+  }
+})
+
+const requestMock = jest.mocked(request)
+
+describe('XMLHttpRequest', () => {
+  it('大写header key', async () => {
+    const data = 'success'
+    // 模拟实现 request 函数
+    requestMock.mockImplementation((opt) => {
+      if (opt.success) {
+        const header = { 'Content-Length': data.length.toString() }
+        opt.success({ data: data as any, header, statusCode: 200, errMsg: '' })
+      }
+      if (opt.complete) {
+        opt.complete({ errMsg: '' })
+      }
+      return {} as RequestTask<any>
+    })
+    // 发起请求
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', 'localhost')
+    const req = new Promise<XMLHttpRequestEvent>((resolve, reject) => {
+      xhr.addEventListener('load', resolve)
+      xhr.addEventListener('error', reject)
+    })
+    xhr.send('')
+    await req
+    // 检查是否能正常读取大写的header
+    expect(xhr.status).toBe(200)
+    expect(data.length).toBeGreaterThan(0)
+    expect(xhr.getResponseHeader('Content-length')).toBe(data.length.toString())
+    expect(xhr.getResponseHeader('content-length')).toBe(data.length.toString())
+    expect(xhr.getResponseHeader('Content-Length')).toBe(data.length.toString())
+  })
+  it('小写header key', async () => {
+    const data = 'success'
+    // 模拟实现 request 函数
+    requestMock.mockImplementation((opt) => {
+      if (opt.success) {
+        const header = { 'content-length': data.length.toString() }
+        opt.success({ data: data as any, header, statusCode: 200, errMsg: '' })
+      }
+      if (opt.complete) {
+        opt.complete({ errMsg: '' })
+      }
+      return {} as RequestTask<any>
+    })
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', 'localhost')
+    const req = new Promise<XMLHttpRequestEvent>((resolve, reject) => {
+      xhr.addEventListener('load', resolve)
+      xhr.addEventListener('error', reject)
+    })
+    xhr.send('')
+    await req
+    // 检查是否能成功读取小写的header
+    expect(xhr.status).toBe(200)
+    expect(xhr.responseText).toBe(data)
+    expect(xhr.getResponseHeader('Content-length')).toBe(data.length.toString())
+    expect(xhr.getResponseHeader('content-length')).toBe(data.length.toString())
+    expect(xhr.getResponseHeader('Content-Length')).toBe(data.length.toString())
+  })
+
+  it('set-cookie', async () => {
+    const data = 'success'
+    // 模拟实现 request 函数
+    requestMock.mockImplementation((opt) => {
+      if (opt.success) {
+        const header = { 'set-cookie': 'aaa=bbb; domain=taro.com' }
+        opt.success({ data: data as any, header, statusCode: 200, errMsg: '' })
+      }
+      if (opt.complete) {
+        opt.complete({ errMsg: '' })
+      }
+      return {} as RequestTask<any>
+    })
+    // 发送一个请求
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', 'localhost')
+    const req = new Promise<XMLHttpRequestEvent>((resolve, reject) => {
+      xhr.addEventListener('load', resolve)
+      xhr.addEventListener('error', reject)
+    })
+    // 在发送请求之前cookie为空
+    expect(window.document.cookie.length).toBe(0)
+    xhr.send('')
+    // 等待请求加载完成
+    await req
+    // 检查是否能读取set-cookie
+    expect(window.document.cookie.length).not.toBe(0)
+  })
+})

package/src/runtime/XMLHttpRequest.ts

@@ -83,7 +83,7 @@ function createXMLHttpRequestEvent (event: string, target:XMLHttpRequest, loaded
     })
   } catch (err) {
     // no handler
-  } 
+  }
   return e
 }
 
@@ -118,7 +118,10 @@ export class XMLHttpRequest extends Events {
   #withCredentials: boolean
   #requestTask: null | Taro.RequestTask<any>
 
-  // 事件
+  // 事件正常流转： loadstart => progress（可能多次） => load => loadend
+  // error 流转： loadstart => error => loadend
+  // abort 流转： loadstart => abort => loadend
+  // web在线测试： https://developer.mozilla.org/zh-CN/play
 
   /** 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时 */
   onabort: ((e: XMLHttpRequestEvent) => void) | null = null
@@ -223,6 +226,7 @@ export class XMLHttpRequest extends Events {
     // 头信息
     const header = Object.assign({}, this.#header)
     // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies
+    // @ts-ignore
     header.cookie = window.document.$$cookie
     if (!this.withCredentials) {
       // 不同源，要求 withCredentials 为 true 才携带 cookie
@@ -259,7 +263,7 @@ export class XMLHttpRequest extends Events {
 
     if (ENABLE_COOKIE) {
       // 处理 set-cookie
-      const setCookieStr = header['Set-Cookie']
+      const setCookieStr = this.getResponseHeader('set-cookie')
 
       if (setCookieStr && typeof setCookieStr === 'string') {
         let start = 0
@@ -294,12 +298,13 @@ export class XMLHttpRequest extends Events {
     // 处理返回数据
     if (data) {
       this.#callReadyStateChange(XMLHttpRequest.LOADING)
-      const loadstartEvent = createXMLHttpRequestEvent('loadstart', this, header['Content-Length'])
+      const contentLength = Number(this.getResponseHeader('content-length') || 0)
+      const loadstartEvent = createXMLHttpRequestEvent('loadstart', this, contentLength)
       this.trigger('loadstart', loadstartEvent)
       isFunction(this.onloadstart) && this.onloadstart(loadstartEvent)
       this.#response = data
 
-      const loadEvent = createXMLHttpRequestEvent('load', this, header['Content-Length'])
+      const loadEvent = createXMLHttpRequestEvent('load', this, contentLength)
       this.trigger('load', loadEvent)
       isFunction(this.onload) && this.onload(loadEvent)
     }
@@ -309,8 +314,30 @@ export class XMLHttpRequest extends Events {
    * 请求失败
    */
   #requestFail (err) {
+    // 微信小程序，无论接口返回200还是其他，响应无论是否有错误，都会进入 success 回调；只有类似超时这种请求错误才会进入 fail 回调
+    //
+    /**
+     * 阿里系小程序，接口返回非200状态码，会进入 fail 回调, 此时 err 对象结构如下（当错误码为 14 或 19 时，会多返回 status、data、headers。可通过这些字段获取服务端相关错误信息）：
+     {
+       data: "{\"code\": 401,\"msg\":\"登录过期，请重新登录\"}"
+       error: 19
+       errorMessage: "http status error"
+       headers: {date: 'Mon, 14 Aug 2023 08:54:58 GMT', content-type: 'application/json;charset=UTF-8', content-length: '52', connection: 'close', access-control-allow-credentials: 'true', …}
+       originalData: "{\"code\": 401,\"msg\":\"登录过期，请重新登录\"}"
+       status: 401
+     }
+     */
+    // 统一行为，能正常响应的，都算 success.
+    if (err.status) {
+      this.#requestSuccess({
+        data: err,
+        statusCode: err.status,
+        header: err.headers
+      })
+      return
+    }
     this.#status = 0
-    this.#statusText = err.errMsg
+    this.#statusText = err.errMsg || err.errorMessage
     const errorEvent = createXMLHttpRequestEvent('error', this, 0)
     this.trigger('error', errorEvent)
     isFunction(this.onerror) && this.onerror(errorEvent)
@@ -324,7 +351,8 @@ export class XMLHttpRequest extends Events {
     this.#callReadyStateChange(XMLHttpRequest.DONE)
 
     if (this.#status) {
-      const loadendEvent = createXMLHttpRequestEvent('loadend', this, this.#header['Content-Length'])
+      const contentLength = Number(this.getResponseHeader('content-length') || 0)
+      const loadendEvent = createXMLHttpRequestEvent('loadend', this, contentLength)
       this.trigger('loadend', loadendEvent)
       isFunction(this.onloadend) && this.onloadend(loadendEvent)
     }

package/src/runtime/index.ts

@@ -1,15 +1,14 @@
 import { document, window } from '@tarojs/runtime'
-import { isWebPlatform } from '@tarojs/shared'
 
 import { Cookie, createCookieInstance } from './Cookie'
 import { type XMLHttpRequestEvent, XMLHttpRequest } from './XMLHttpRequest'
 
 declare const ENABLE_COOKIE: boolean
 
-if (!isWebPlatform()) {
+if (process.env.TARO_PLATFORM !== 'web') {
   if (ENABLE_COOKIE) {
     const _cookie = createCookieInstance()
-  
+
     Object.defineProperties(document, {
       URL: {
         get () {