摘要
axios是一個基于promise的HTTP庫，可以用于瀏覽器中進行AJAX請求處理，在專案中，為了實作通用性，封裝了一個axios請求，
axios封裝
1、配置環境變數
// 根據不同環境變數選擇不同的介面服務器域名
export const BASE_URL = process.env.REACT_APP_API;
2、創建axios實體
創建axios實體可以根據官方檔案進行屬于自己的配置，具體屬性可以參考https://www.kancloud.cn/yunye/axios/234845
// 創建axios實體
const service = axios.create({
baseURL: BASE_URL,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
timeout: 5 * 1000 // 請求超時時間
});
3、創建request攔截器
在請求、回應被then 或 catch 處理前攔截它們，在發送請求之前可以做些處理或者對請求錯誤做些什么處理，具體配置可以參考官網，
// request攔截器 service.interceptors.request.use( config => {
// 登錄時，Token登錄 // const token = // localStorage.getItem('token') || sessionStorage.getItem('token'); // if (token) { // config.headers.Authorization = 'JWT ' + token; // } return config; }, error => { // Do something with request error console.log(error); // for debug return Promise.reject(error); } );
4、創建response攔截器
// response 攔截器
service.interceptors.response.use(
response => {
const data = https://www.cnblogs.com/BlueBerryCode/p/response.data;
if (data.code === 2000) {
return data.data;
}
if (data.code === 4040) {
return Promise.reject({message:'網路中斷'});
}
if (data.code === 4030) {
return Promise.reject({message: '登錄過期'});
}
return Promise.reject(data);
},
error => {
error.message = '網路超時';
return Promise.reject(error);
}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/83651.html
標籤：JavaScript
上一篇：Ref實作導航滾動定位