Fetch請(qǐng)求封裝。
//前置拼接url
let api = '****';
//處理promise和fetch的兼容性以及引入
require('es6-promise').polyfill();
require('isomorphic-fetch');
//處理get請(qǐng)求吊档，傳入?yún)?shù)對(duì)象拼接
let formatUrl = obj => {
let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=$架谎&`, '?');
return params.substring(0, params.length - 1);
};
let Fetch = (url, option = {}) => {
option.headers = option.headers || {};
option.headers['pl'] = 'admin';
option.headers['token'] = `${window.localStorage.getItem('token')}`;
const m = (option.method || '').toLocaleLowerCase();
// get query format
if (m == 'get') {
if (option.query) {
url = url + formatUrl(option.query);
}
}
//對(duì)非get類(lèi)請(qǐng)求頭和請(qǐng)求體做處理
if (m === 'post' || m === 'put' || m === 'delete') {
option.headers['Content-Type'] = option.headers['Content-Type'] || 'application/json';
option.body = JSON.stringify(option.body);
// option.body = qs.stringify(option.body) //根據(jù)后臺(tái)要求讯屈，如果有時(shí)候是java請(qǐng)求會(huì)用qs轉(zhuǎn)
}
return new Promise((resolve, reject) => {
fetch(api + url, option)
.then(response => {
status = response.status;
if (response.status >= 500) {
Fetch.systemError && Fetch.systemError('系統(tǒng)錯(cuò)誤');
}
return response;
})
.then(parseJSON)
.then(response => {
response.status = status;
if (response.status >= 401) {
if (response.state == 8888) {
//登陸超時(shí)返回狀態(tài)嗎
Fetch.overTime && Fetch.overTime(response);
}
if (response.state == 6666) {
//沒(méi)有權(quán)限返回狀態(tài)碼
}
}
resolve(response);
})
.catch(error => {
console.log('err', error);
Fetch.otherError && Fetch.otherError(error.message);
});
});
};
//response 轉(zhuǎn)化
function parseJSON(response) {
return response.json();
}
export default Fetch;
main.js全局引入
//引入并自己封裝的Fetch 方法
import Fetch from './helper/api/fetch';
Vue.prototype.Fetch = Fetch;
使用亡嫌。
//get 使用query傳入字段，其他請(qǐng)求使用body,這里的get和body是請(qǐng)求參數(shù)對(duì)象
let res = await this.Fetch('url', {
method: 'get',
query
});
