🔖

2020-04-18 23:02:34 +08:00 · 2020-04-18 23:02:34 +08:00 · b35d4f7de3
parent 6f75dc5c12
commit b35d4f7de3
6 changed files with 321 additions and 121 deletions
--- a/README.md
+++ b/README.md
@ -31,7 +31,204 @@ npm i axios-miniprogram
 * 支持 自定义转换数据。
 * 支持 自定义平台适配器

-## 使用
+### `config`配置项
+
+非全平台兼容的配置只会在平台支持的情况下生效。
+
+|参数|类型|默认值|说明|全平台兼容|
+|:-|:-|:-|:-|:-|:-|
+|adapter|Function||自定义适配器|是|
+|baseURL|String||基础地址|是|
+|url|String||请求地址|是|
+|method|String|get|请求方法|
+|params|Object||请求参数|是|
+|data|String/Object/ArrayBuffer||请求数据|是|
+|headers|Object|[查看](https://github.com/early-autumn/axios-miniprogram/blob/master/src/helper/defaults.ts#L11)|请求头|是|
+|validateStatus|Function|[查看](https://github.com/early-autumn/axios-miniprogram/blob/master/src/helper/defaults.ts#L28)|自定义合法状态码|是|
+|paramsSerializer|Function||自定义参数序列化|是|
+|transformRequest|Function/Array<.Function>||自定义转换请求数据|是|
+|transformResponse|Function/Array<.Function>||自定义转换响应数据|是|
+|cancelToken|Object||取消令牌|是|
+|timeout|Number|0|超时时间|
+|dataType|String|json|响应数据格式|是|
+|responseType|String|text|响应数据类型|是|
+|enableHttp2|Boolean|false|开启 http2|
+|enableQuic|Boolean|false|开启 quic|
+|enableCache|Boolean|false|开启 cache|
+|sslVerify|Boolean|true|验证 ssl 证书|
+
+##### `config.method`的合法值
+
+`method`对大小写不敏感，可以使用大写，也可以使用小写。
+
+|值|说明|全平台兼容|
+|:-|:-|:-|
+|OPTIONS|
+|GET||是|
+|HEAD|
+|POST||是|
+|PUT||是|
+|DELETE||是|
+|TRACE|
+|CONNECT|
+
+##### `config.dataType`的合法值
+
+|值|说明|全平台兼容|
+|:-|:-|:-|
+|json|返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse|是|
+|其他|不对返回的内容进行 JSON.parse|是|
+
+##### `config.responseType`的合法值                                                                                              
+
+|值|说明|全平台兼容|
+|:-|:-|:-|
+|text|响应的数据为文本|是|
+|arraybuffer|响应的数据为 ArrayBuffer|是| 
+
+##### `config.validateStatus`自定义合法状态码
+
+可以让请求按照您的要求成功或者失败。
+
+```typescript
+axios('/test', {
+  validateStatus: function validateStatus(status) {
+    // 这样，状态码在 100 到 400 之间都是请求成功
+    return status >= 200 && status < 300;
+  }
+});
+```
+
+##### `config.paramsSerializer`自定义参数序列化
+
+可以使用自己的规则去序列化参数。
+
+```typescript
+axios('/test', {
+  paramsSerializer: function paramsSerializer(params) {
+    return qs.stringify(params, {arrayFormat: 'brackets'});
+  }
+});
+```
+
+##### 自定义转换数据
+
+可以在请求发出之前转换请求数据，在请求成功之后转换响应数据。
+
+```typescript
+axios('/test', {
+  transformRequest: [function (data, headers) {
+    // 转换请求数据
+    return data;
+  }],
+  transformResponse: [function (data) {
+    // 转换响应数据
+    return data;
+  }],
+});
+```
+
+##### `config.adapter`自定义平台适配器
+
+您可以自己适配您所在的平台
+
+```typescript
+axios.defaults.adapter = function adapter(adapterConfig) {
+  const {
+    // 接口地址
+    url,
+    // HTTP 请求方法
+    method,
+    // 请求数据
+    data,
+    // 请求头 同 headers
+    header,
+    // 请求头 同 header
+    headers,
+    // 返回的数据格式
+    dataType,
+    // 响应的数据类型
+    responseType,
+    // 超时时间
+    timeout,
+    // 开启 http2
+    enableHttp2,
+    // 开启 quic
+    enableQuic,
+    // 开启 cache
+    enableCache,
+    // 验证 ssl 证书
+    sslVerify,
+    // 成功的响应函数
+    success,
+    // 失败的响应函数
+    fail
+  } = adapterConfig;
+
+  // 在 adapterConfig 中选择您需要的参数发送请求
+  wx.request({
+    url,
+    method,
+    data,
+    header,
+    success,
+    fail
+  });
+}
+```
+
+### `defaults`默认配置
+
+##### 全局默认配置`axios.defaults`
+
+```typescript
+axios.defaults.baseURL = 'https://www.xxx.com';
+axios.defaults.headers.common['Accept'] = 'application/json, test/plain, */*';
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+```
+
+##### 自定义实例默认配置
+
+```typescript
+// 可以创建时传入
+const instance = axios.create({
+  baseURL: 'https://www.xxx.com',
+  headers: {
+    common: {
+      'Accept': 'application/json, test/plain, */*'
+    },
+    post: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  }
+});
+
+// 也可以创建后修改
+instance.defaults.baseURL = 'https://www.xxx.com';
+instance.defaults.headers.common['Accept'] = 'application/json, test/plain, */*';
+instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+```
+
+##### 配置优先顺序
+
+发送请求时，会使用默认配置`defaults`和自定义配置`config`合并出请求配置`requestConfig`，然后用合并出的请求配置`requestConfig`去发送请求，多数情况下，后者优先级要高于前者，具体合并策略可以参考 [mergeConfig.ts](https://github.com/early-autumn/axios-miniprogram/blob/master/src/helper/mergeConfig.ts) 的实现。
+
+### `response`响应体
+
+|属性|类型|说明|全平台兼容|
+|:-|:-|:-|:-|
+|status|Number|状态码|是|
+|statusText|String|状态文本|是|
+|data|String/Object/ArrayBuffer|开发者服务器返回的数据|是|
+|headers|Object|响应头|是|
+|response|Object|通用响应体|是|
+|request|Object|通用请求配置|是|
+|config|Object|Axios 请求配置|是|
+|cookies|Array<.String>|开发者服务器返回的 cookies，格式为字符串数组|
+|profile|Object|网络请求过程中一些关键时间点的耗时信息|
+
+
+## API

 可以通过将相关配置传递给`axios`来发送请求。

@ -107,80 +304,6 @@ axios.post('/test', { test: 1 }, {
 });
 ```

-## 配置
-
-|参数|类型|默认值|说明|平台差异
-|:-|:-|:-|:-|:-|:-|:-|
-|adapter|Function||
-|baseURL|String||
-|url|String||
-|method|String|get|
-|params|Object||
-|data|String/Object/ArrayBuffer||
-|headers|Object|[查看]()|
-|validateStatus|Function||
-|paramsSerializer|Function||
-|transformRequest|Function/Array|
-|transformResponse|Function/Array|
-|cancelToken|Object|
-|timeout|Number|0|
-|dataType|String|json|
-|responseType|String|text|
-|enableHttp2|Boolean|false|
-|enableQuic|Boolean|false|
-|enableCache|Boolean|false|
-|sslVerify|Boolean|false|
-
-### 默认配置
-
-##### 全局默认配置`axios.defaults`
-
-```typescript
-axios.defaults.baseURL = 'https://www.xxx.com';
-axios.defaults.headers.common['Accept'] = 'application/json, test/plain, */*';
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-```
-
-##### 自定义实例默认配置
-
-```typescript
-// 可以创建时传入
-const instance = axios.create({
-  baseURL: 'https://www.xxx.com',
-  headers: {
-    common: {
-      'Accept': 'application/json, test/plain, */*'
-    },
-    post: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  }
-});
-
-// 也可以创建后修改
-instance.defaults.baseURL = 'https://www.xxx.com';
-instance.defaults.headers.common['Accept'] = 'application/json, test/plain, */*';
-instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-```
-
-##### 配置优先顺序
-
-发送请求时，会使用默认配置`defaults`和自定义配置`config`合并出请求配置`requestConfig`，然后用合并出的请求配置`requestConfig`去发送请求，多数情况下，后者优先级要高于前者，具体合并策略可以参考 [mergeConfig.ts](https://github.com/early-autumn/axios-miniprogram/blob/master/src/helper/mergeConfig.ts) 的实现。
-
-
-
-### `axios.getUri(config)`
-
-根据配置中的`url`和`params`生成一个`URI`。
-
-```typescript 
-// uri === '/test?id=1'
-const uri = axios.getUri({
-  url: '/test',
-  params: { id: 1 }
-});
-```
-
 ### `axios.create(config)`

 创建一个`自定义实例`，传入的自定义配置`config`会和`axios`的默认配置`axios.defaults`合并成`自定义实例`的默认配置。
@ -204,7 +327,93 @@ instance('/test');
 instance.get('/test');
 ```

-### `axios.Axios`
+### `axios.interceptors`拦截器
+
+可以先拦截请求或响应，然后再由then或catch处理。
+
+```typescript
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+  // 在发送请求之前做些什么
+  console.log('request');
+  return config;
+}, function (error) {
+  //处理请求错误
+  return Promise.reject(error);
+});
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+  // 请求成功后做些什么
+  console.log('response');
+  return response;
+}, function (error) {
+  // 处理响应错误
+  return Promise.reject(error);
+});
+
+axios('/test').then(function (response){
+  console.log('ok');
+});
+
+// log 'request' 'response' 'ok'
+```
+
+如果以后需要删除拦截器，则可以。
+
+```typescript
+const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
+axios.interceptors.request.eject(myInterceptor);
+```
+
+还可以将拦截器添加到`axios`的`自定义实例`中。
+
+```typescript
+const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
+axios.interceptors.request.eject(myInterceptor);
+```
+
+### `axios.CancelToken`取消令牌
+
+可以使用`CancelToken`取消已经发出的请求。
+
+```typescript
+let cancel;
+
+axios('/test', {
+  cancelToken: new axios.CancelToken(function (c){
+    cancel = c;
+  })
+});
+
+cancel('请求被取消了');
+```
+
+还可以使用`CancelToken.source`工厂方法创建`CancelToken`。
+
+```typescript
+const source = axios.CancelToken.source()
+
+axios('/test', {
+  cancelToken: source.token
+});
+
+source.cancel('请求被取消了');
+```
+
+### `axios.getUri(config)`
+
+根据配置中的`url`和`params`生成一个`URI`。
+
+```typescript 
+// uri === '/test?id=1'
+const uri = axios.getUri({
+  url: '/test',
+  params: { id: 1 }
+});
+```
+
+### `axios.Axios`类

 `axios.Axios`是一个类，其实`axios`就是`axios.Axios`类的实例改造而来的，`axios.create(config)`创建的也是`axios.Axios`的实例。

@ -222,3 +431,4 @@ const instance = new axios.Axios({
 // value=零污染 来自 instance.defaults.params
 instance.get('/test');
 ```
+
--- a/src/adapter/adaptive.ts
+++ b/src/adapter/adaptive.ts
@ -2,7 +2,7 @@
 * @Author: early-autumn
 * @Date: 2020-04-17 12:18:25
 * @LastEditors: early-autumn
- * @LastEditTime: 2020-04-18 16:04:27
+ * @LastEditTime: 2020-04-18 20:34:02
 */
 import { Adapter, Platform } from '../types';

@ -14,39 +14,32 @@ var tt: Platform;
 var qq: Platform;
 var uni: Platform;

-/**
- * 适配器
- */
-let request: Adapter | undefined;
-
 /**
 * 设置当前平台适配器
 */
-function adaptive(): void {
+function adaptive(): Adapter | undefined {
  switch (true) {
    // 微信小程序
    case wx !== undefined:
-      request = wx.request;
+      return wx.request;
    // 支付宝小程序
    case my !== undefined:
-      request = my.request ?? my.httpRequest;
+      return my.request ?? my.httpRequest;
    // 百度小程序
    case swan !== undefined:
-      request = swan.request;
+      return swan.request;
    // 字节跳动小程序
    case tt !== undefined:
-      request = tt.request;
+      return tt.request;
    // QQ 小程序
    case qq !== undefined:
-      request = qq.request;
+      return qq.request;
    // uniapp
    case uni !== undefined:
-      request = uni.request;
+      return uni.request;
    default:
      throw new Error('暂未适配此平台，您需要参阅文档使用自定义适配器手动适配当前平台');
  }
 }

-adaptive();
-
-export default request;
+export default adaptive;
--- a/src/core/request.ts
+++ b/src/core/request.ts
@ -2,11 +2,10 @@
 * @Author: early-autumn
 * @Date: 2020-04-16 00:48:45
 * @LastEditors: early-autumn
- * @LastEditTime: 2020-04-18 15:56:12
+ * @LastEditTime: 2020-04-18 20:32:56
 */
 import { AxiosRequestConfig, AxiosResponse, Response } from '../types';
 import createError from '../core/createError';
-import requestAdapter from '../adapter/request';
 import requestConfigAdapter from '../adapter/requestConfig';
 import responseAdapter from '../adapter/response';

@ -17,7 +16,7 @@ import responseAdapter from '../adapter/response';
 */
 export default function request(config: AxiosRequestConfig): Promise<AxiosResponse> {
  return new Promise(function dispatchAdapter(resolve, reject): void {
-    const { adapter = requestAdapter, cancelToken } = config;
+    const { adapter, cancelToken } = config;
    const request = requestConfigAdapter(config);

    /**
--- a/src/helper/defaults.ts
+++ b/src/helper/defaults.ts
@ -2,11 +2,13 @@
 * @Author: early-autumn
 * @Date: 2020-04-15 22:09:38
 * @LastEditors: early-autumn
- * @LastEditTime: 2020-04-18 17:00:38
+ * @LastEditTime: 2020-04-18 20:34:41
 */
 import { AxiosRequestConfig } from '../types';
+import adaptive from '../adapter/adaptive';

 const defaults: AxiosRequestConfig = {
+  adapter: adaptive(),
  method: 'get',
  headers: {
    common: {
@ -28,13 +30,23 @@ const defaults: AxiosRequestConfig = {
  validateStatus: function validateStatus(status) {
    return status >= 200 && status < 300;
  },
+  transformResponse: [
+    function transformResponse(data) {
+      if (typeof data === 'string') {
+        try {
+          data = JSON.parse(data);
+        } catch (e) {}
+      }
+      return data;
+    },
+  ],
  timeout: 0,
  dataType: 'json',
  responseType: 'text',
  enableHttp2: false,
  enableQuic: false,
  enableCache: false,
-  sslVerify: false,
+  sslVerify: true,
 };

 export default defaults;
--- a/src/helper/mergeConfig.ts
+++ b/src/helper/mergeConfig.ts
@ -2,26 +2,11 @@
 * @Author: early-autumn
 * @Date: 2020-04-15 22:48:25
 * @LastEditors: early-autumn
- * @LastEditTime: 2020-04-18 14:56:44
+ * @LastEditTime: 2020-04-18 22:58:05
 */
 import { AxiosRequestConfig } from '../types';
 import { isPlainObject, deepMerge } from './utils';

-/**
- * 只取 config1 中的配置
- *
- * @param keys
- * @param config
- * @param config1
- */
-function onlyFromConfig1(keys: ['adapter'], config: AxiosRequestConfig, config1: AxiosRequestConfig) {
-  keys.forEach((key) => {
-    if (config1[key] !== undefined) {
-      config[key] = config1[key] as any;
-    }
-  });
-}
-
 /**
 * 只取 config2 中的配置
 *
@ -47,6 +32,7 @@ function onlyFromConfig2(keys: ['url', 'data'], config: AxiosRequestConfig, conf
 */
 function priorityFromConfig2(
  keys: [
+    'adapter',
    'baseURL',
    'method',
    'validateStatus',
@ -111,11 +97,10 @@ function deepMergeConfig(
 export default function mergeConfig(config1: AxiosRequestConfig, config2: AxiosRequestConfig): AxiosRequestConfig {
  const config: AxiosRequestConfig = {};

-  onlyFromConfig1(['adapter'], config, config1);
  onlyFromConfig2(['url', 'data'], config, config2);
-  deepMergeConfig(['headers', 'params'], config, config1, config2);
  priorityFromConfig2(
    [
+      'adapter',
      'baseURL',
      'method',
      'validateStatus',
@ -135,6 +120,7 @@ export default function mergeConfig(config1: AxiosRequestConfig, config2: AxiosR
    config1,
    config2
  );
+  deepMergeConfig(['headers', 'params'], config, config1, config2);

  return config;
 }
--- a/src/types.ts
+++ b/src/types.ts
@ -2,7 +2,7 @@
 * @Author: early-autumn
 * @Date: 2020-04-13 15:23:53
 * @LastEditors: early-autumn
- * @LastEditTime: 2020-04-18 17:00:57
+ * @LastEditTime: 2020-04-18 23:00:43
 */
 /**
 * 任意值对象
@ -109,12 +109,12 @@ export interface RequestConfig {
  data: Data;

  /**
-   * 响应头 Header 同 headers
+   * 请求头 同 headers
   */
  header: AnyObject;

  /**
-   * 响应头 Headers 同 header
+   * 请求头 同 header
   */
  headers: AnyObject;

@ -129,7 +129,7 @@ export interface RequestConfig {
  responseType?: 'text' | 'arraybuffer';

  /**
-   * 超时时间，单位为毫秒
+   * 超时时间
   */
  timeout?: number;

@ -308,7 +308,7 @@ export declare interface AxiosRequestConfig {
  cancelToken?: CancelToken;

  /**
-   * 超时时间，单位为毫秒
+   * 超时时间
   */
  timeout?: number;