# Request 网络请求

# 引入

在 index.js 中引入

import request from '/dist/extends/request/index';

# 特性

  • 基于wx.request,wx.downloadFilewx.uploadFile封装的 Http 库
  • 支持PromiseAPI
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据

# 案例

执行get请求

request
  .get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
request
  .get('/user', {
    data: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行post请求

request
  .post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return request.get('/user/12345');
}

function getUserPermissions() {
  return request.get('/user/12345/permissions');
}

request.all([getUserAccount(), getUserPermissions()]).then(
  request.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  })
);

# request API

可以通过向 request 传递相关配置来创建请求

request(config)

// 发送 POST 请求
request({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

request(url[, config])

// 发送 GET 请求(默认的方法)
request('/user/12345');

# 请求方法的别名

为方便起见,为所有支持的请求方法提供了别名

request.request(config)

request.options(url[, config])

request.get(url[, config])

request.head(url[, config])

request.post(url[, config])

request.put(url[, config])

request.delete(url[, config])

request.trace(url[, config])

request.connect(url[, config])

request.download(url[, config])

request.upload(url[, config])

注意: download是用来下载文件的,upload是用来上传文件的

# 并发

处理并发请求的助手函数

request.all(iterable)

request.spread(callback)

# 创建实例

可以使用自定义配置新建一个 request 实例

request.create([config])

const instance = request.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

# 实例方法

request.request(config)

request.options(url[, config])

request.get(url[, config])

request.head(url[, config])

request.post(url[, config])

request.put(url[, config])

request.delete(url[, config])

request.trace(url[, config])

request.connect(url[, config])

request.download(url[, config])

request.upload(url[, config])

# 响应结构

某个请求的响应包含以下信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'request:ok',

   // `config` 是为请求提供的配置信息
  config: {},

 // 'request'
  request: {}
}

使用 then 时,你将接收下面这样的响应 :

request.get('/user/12345').then(function (response) {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.config);
});

# 配置默认值

你可以指定将被用在各个请求的配置默认值

全局的 request 默认值

request.defaults.baseURL = 'https://api.example.com';
request.defaults.headers.common['Authorization'] = AUTH_TOKEN;
request.defaults.headers.post['Content-Type'] =
  'application/x-www-form-urlencoded';

自定义实例默认值

const instance = request.create({
  baseURL: 'https://api.example.com'
});

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

# 配置的优先顺序

配置会以一个优先顺序进行合并。这个顺序是:在 request/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者。这里是一个例子:

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = request.create();

// 覆写库的超时默认值
// 现在,在超时前,所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

# 拦截器

在请求或响应被 thencatch 处理前拦截它们。

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

如果你想在稍后移除拦截器,可以这样:

const myInterceptor = request.interceptors.request.use(function () {
  /*...*/
});
request.interceptors.request.eject(myInterceptor);

# 错误处理

request.get('/user/12345').catch(function (error) {
  console.log(error.config);
});

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

request.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500;
  }
});

# 取消

使用 cancel token 取消请求

可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:

const CancelToken = request.CancelToken;
const source = CancelToken.source();

request
  .get('/user/12345', {
    cancelToken: source.token
  })
  .catch(function (thrown) {
    if (request.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理错误
    }
  });

request.post(
  '/user/12345',
  {
    name: 'new name'
  },
  {
    cancelToken: source.token
  }
);

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

const CancelToken = request.CancelToken;
let cancel;

request.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

cancel();

# 请求配置

通用配置

字段名 说明 类型 默认值
method 创建请求时使用的方法 String get
timeout 指定请求超时的毫秒数(0 表示无超时时间) Number 0
validateStatus 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise Function ()=>{}
transformRequest 允许在向服务器发送前,修改请求数据 Function,Array<\Function> []
transformRespond 在传递给 then/catch 前,允许修改响应数据 Function,Array<\Function> []
adapter 适配器,根据适配器派发请求 Function ()=>{}
headers 即将被发送的自定义请求头 Object ()=>{}
baseURL 将自动加在 url 前面,除非 url 是一个绝对 URL String
cancelToken 指定用于取消请求的 cancel token cancelToken

method='options'|'get'|'head'|'post'| 'put'|'delete'|'trace'|'connect'支持的配置

字段名 说明 类型 默认值
data 即将与请求一起发送请求参数 Object
dataType 返回的数据格式,合法值为 json 和其他(不对返回的内容进行 JSON.parse) String json
responseType 响应的数据类型,合法值为 text 和 arraybuffer String text
enableHttp2 是否开启 http2 Boolean false
enableQuic 是否开启 quic Boolean false
enableCache 是否开启 cache Boolean false

method='download'支持的配置

字段名 说明 类型 默认值
onDownloadProgress 下载处理进度事件
filePath 文件下载后存储的路径 (本地路径)

method='upload'支持的配置

字段名 说明 类型 默认值
onUploadProgress 上传处理进度事件
filePath 上传文件资源的路径
name 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容

headers 字段说明

  headers: {
    // 每个请求都带上common里面的key-val
    common: { a: '1' },
    // get请求都带上里面的key-val
    get:{},
    // post请求都带上里面的key-val
    post:{}
    // ...
  }