摘要ios
axios是一個基於promise的HTTP庫,能夠用於瀏覽器中進行AJAX請求處理。在項目中,爲了實現通用性,封裝了一個axios請求。json
axios封裝axios
一、配置環境變量promise
// 根據不一樣環境變量選擇不一樣的接口服務器域名 export const BASE_URL = process.env.REACT_APP_API;
二、建立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 // 請求超時時間 });
三、建立request攔截器網絡
在請求、響應被then 或 catch 處理前攔截它們,在發送請求以前能夠作些處理或者對請求錯誤作些什麼處理。具體配置能夠參考官網。session
// 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); } );
四、建立response攔截器app
// response 攔截器 service.interceptors.response.use( response => { const data = 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); } );