@tarojs/plugin-http 3.7.0-canary.1 → 3.7.0-canary.3

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

@@ -406,7 +406,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 遭遇错误时触发 */
@@ -606,7 +609,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 +637,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 +678,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);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-http",
-  "version": "3.7.0-canary.1",
+  "version": "3.7.0-canary.3",
   "description": "Taro 小程序端支持使用 web 请求 的插件",
   "main": "index.js",
   "files": [
@@ -23,9 +23,9 @@
   },
   "homepage": "https://github.com/NervJS/taro#readme",
   "dependencies": {
-    "@tarojs/runtime": "3.7.0-canary.1",
-    "@tarojs/service": "3.7.0-canary.1",
-    "@tarojs/shared": "3.7.0-canary.1"
+    "@tarojs/runtime": "3.7.0-canary.3",
+    "@tarojs/service": "3.7.0-canary.3",
+    "@tarojs/shared": "3.7.0-canary.3"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.0.0",

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

@@ -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
@@ -259,7 +262,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 +297,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 +313,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 +350,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)
     }