1.0.0-Alpha.7 • Published 4 years ago
@wedjs/request v1.0.0-Alpha.7
@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');
请求方法的别名
为方便起见,为所有支持的请求方法提供了别名
- _.request(config)
- _.request.get(url, config)
- _.request.delete(url, config)
- _.request.head(url, config)
- _.request.post(url[, data, config])
- _.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()
1.0.0-Alpha.7
4 years ago
1.0.0-Alpha.4
4 years ago
1.0.0-Alpha.2
4 years ago
1.0.0-Alpha.1
4 years ago
1.0.0-Alpha.0
4 years ago