基于axios的前端网络请求库。
npm:
$ npm install sx-fetch --save
yarn:
$ yarn add sx-fetch
初始化:
import fetch from 'sx-fetch';
fetch.init({
setOptions: (instance) => {
instance.defaults.baseURL = 'http://localhost:8080/'; // 接口地址
instance.defaults.timeout = 10000; // 请求超时时间,默认为10000毫秒
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 设置headers,默认设置了post['Content-Type']
// instance.interceptors // 拦截请求
},
onShowErrorTip: (err, errorTip) => {
// 请求失败时调用,errorTip 为提示语。
},
onShowSuccessTip: (response, successTip) => {
// 请求成功时调用,successTip 为提示语。
},
isMock: (url, data, method, options) => {
// mock
},
});
sx-fetch
0.2.1 版本及以上支持以下写法。
fetch.init({
baseURL: 'http://localhost:8080/';
timeout: 10000;
headers: {
auth_token: AUTH_TOKEN,
},
onShowErrorTip: () => {...},
onShowSuccessTip: () => {...},
isMock: () => {...},
});
初始化时如果需要配置 interceptors
,仍需使用 setOptions
方法。
instance.interceptors
请参考 axios#interceptors 用法。
默认处理方法如下:
instance.interceptors.request.use(cfg => {
return cfg;
}, error => {
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
return response;
}, error => {
return Promise.reject(error);
});
发送请求:
fetch.get('/user').then(user => {
console.log(user);
}).catch(err => {
console.log(err);
}).finally(() => {
console.log('请求完成'); // 无论请求成功或失败都会执行。
});
需要
sx-fetch
版本 >= 0.2.1
应用中有时需要同时使用不同的fetch配置,例如需要请求多个服务器。这时可以使用 create
方法创建新的fetch实例。
const instance = fetch.create();
新创建的fetch实例 instance
的行为与默认的fetch实例完全相同,你可以使用 init
方法初始化该实例.
还可以在创建实例的同时传入配置参数。
instance.init({
baseURL: 'http://localhost:8080',
...
})
还可以在创建实例的同时传入配置参数。
const instance = fetch.create({
baseURL: 'http://localhost:8080',
...
});
需要
sx-fetch
版本 >= 0.2.1
fetch.defaults.baseURL = 'http://localhost:8080';
fetch.defaults.timeout = 10000;
fetch.defaults.headers.common['auth_token'] = AUTH_TOKEN;
可以给指定实例设置配置信息
const instance = fetch.create();
instance.defaults.baseURL = 'http://localhost:8080';
...
mock请求使用 mockDefaults
属性来配置。
fetch.mockDefaults.baseURL = 'http://localhost:8080';
...
Param | Description | Type | Default |
---|---|---|---|
[url] | 接口地址 | String |
/ |
[params] | 请求参数对象(get 请求参数会自定追加到url后。) |
Object |
{} |
[options] | 配置参数 | Object |
{} |
[options.errorTip] | 请求失败的提示信息 | String | Boolean |
get: '获取数据失败!'、 post: '操作失败!' |
[options.successTip] | 请求成功的提示信息 | String | Boolean |
false |
[options.timeout] | 请求超时时间(ms) | Number |
10000 |
options
详细配置参数参考 axios#request-config;
需要
sx-fetch
版本 >= 0.2.1
同时发起多个请求,全部请求完成之后再执行回调。
可以使用 Promise.all()
方法,sx-fetch
也内置了 all
方法。
const getUser = fetch.get('/user');
const getList = fetch.get('/list');
fetch.all([getUser, getList]).then(([user, list]) => {
console.log(user, list);
});
使用装饰器方法 inject
将fetch注入到react组件的props中。当组件销毁时,未完成的请求会被中断。
注意:注入到react组件内的fetch实例只包含网络请求的方法,不包含其他方法及属性。
Param | Description | Type | Default |
---|---|---|---|
[options] | Object |
{} | |
[options.propName] | 注入props的属性名 | String |
$fetch |
import React, {Component} from 'react';
import fetch from 'sx-fetch';
@fetch.inject()
class Comps extends Component {
getUser() {
const {$fetch} = this.props;
$fetch.get('/user').then(user => {
console.log(user);
});
}
...
}
注入多个fetch实例必须传入 propName
,否则props中的fetch实例会被覆盖。
const instance = fetch.create();
@fetch.inject()
@instance.inject({propName: '$instance'})
class Comps extends Component {
getUser() {
const {$fetch} = this.props;
$fetch.get('/user').then(user => {...});
$instance.get('/user').then(() => {...});
}
...
}