1. 安装所需依赖
npm i qs -S
2. 引入所需依赖
import qs from 'qs'
3. 根据(生产、测试、研发)环境,设置baseUrl
let baseUrl = ''
if (env == 'production') {
baseUrl = 'https://www.littlegao.com/';
} else if (env === 'test') {
baseUrl = 'http://test.littlegao.com/';
} else {
baseUrl = 'http://localhost:3000/';
}
4. 请求主题封装
export default function request(url, options = {}) {
url = baseUrl + url;
// 没有指定请求方式则默认GET请求
!options.method ? options.method = 'GET': null
if (options.hasOwnProperty('params')) { //如果存在get请求的参数params
if (/^(GET|DELETE/HEAD/OPTIONS)$/i.test(options.method)) { // 如果是这些请求方式
const ask = url.includes('?')? '&': '?';
url = ask + qs.stringifty(options.params);
}
delete options.params;
}
//合并配置
options = Object.assign({
// 是否允许携带凭证,include允许,same-origin 同源允许,omit拒绝
credentials: 'include',
// 设置请求头
headers: {}
}, options);
// 凭证验证
const token = localStorage.getItem('token');
token && options.headers.Authorization = token;
// 处理post请求
if (/^(POST|PUT)/.test(options.method)) {
!options.type? options.type = 'urlencoded': null;
if (options.type === 'urlencoded') {
options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
options.body = qs.stringify(options.body)
}
if (options.type === 'json') {
options.headers['Content-Type'] = 'application/json';
options.body = qs.stringify(options.body)
}
}
return fetch(url, options).then(response => {
if(/^(2|3)d{2}$/.test(response.status)) {
switch(response.status) {
case 401: // 认证未通过,未登录
break;
case 403: // 已请求,但服务器拒绝(一般是token过期)
break;
case 404: // 请求的资源未找到
break;
...
default:
break;
}
return Promise.reject(response);
}
return response.json();
}).catch(error => {
if(!window.navigator.onLine) {
return;
}
Promise.reject(error);
})
}