@wedjs/request

介绍

@wedjs/request 是一个基于 Fetch 和 Promise 进行封装开发的HTTP库。
API 写法参考 Axios 和 小程序的 Request 结合进行开发。
暂不支持 IE 浏览器。

安装

通过 NPM 安装：

npm i @wedjs/request

或者 直接引用 CDN：

<script src="https://cdn.wangerdi.cn/wedjs/request.js"></script>

例子

执行 GET 请求

// 为给定 ID 的 user 创建请求
_.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);
  });

// 也可使用回调写法
_.request({
  url: '/user',
  method: 'GET',
  data: {
    ID: 12345
  },
  success: function (response) {
    console.log(response);
  },
  fail: function (error) {
    console.log(error);
  },
  complete: function() {}
})

执行 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(function (resList) {
    console.log(resList)
    // 两个请求现在都执行完成
  });

request API

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

_.request(config)

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

_.request(url[, config])

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

请求方法的别名

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

1. _.request(config)
2. _.request.get(url[, config])
3. _.request.delete(url[, config])
4. _.request.head(url[, config])
5. _.request.post(url[, data[, config]])
6. _.request.put(url[, data[, config]])

NOTE

在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

并发

处理并发请求的助手函数

_.request.all(iterable)

创建实例

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

_.request.create([config])

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

请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'GET', // 默认是 GET

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `data` 是作为请求主体被发送的数据
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

  // `dataType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  dataType: 'json', // 默认的

  // `success` 接口调用成功的回调函数
  success: function(response) {
    ...
  },

  // `fail` 接口调用失败的回调函数
  fail: function(error) {
    ...
  },

  // `complete` 接口调用结束的回调函数（调用成功、失败都会执行）
  complete: function() {
    ...
  }
}

配置的默认值/defaults

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

全局的 request 默认值

_.request.defaults.baseURL = 'https://api.example.com';
_.request.defaults.headers['content-type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

// 创建实例时设置配置的默认值
var instance = _.request.create({
  baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers['content-type'] = 'application/x-www-form-urlencoded';

配置的优先顺序

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

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

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

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

拦截器

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

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

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

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

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

可以为自定义 axios 实例添加拦截器

var instance = _.request.create();
instance.interceptors.request.use(function () {/*...*/});

错误处理

_.request.get('/user/12345')
  .catch(function (error) {
    if (error.code) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.code);
      console.log(error.data);
      console.log(error.message);
      console.log(error.req_id);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error);
    }
  });

清除请求

使用 abort 取消请求

let task = _.request.get('/user/12345')
  .catch(function(error) {
    console.log(error)
  })

// 取消请求
task.abort()

取消多个并发请求

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

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

let task = _.request.all([getUserAccount(), getUserPermissions()])
  .catch(function(error) {
    console.log(error)
  })

// 取消请求
task.abort()