1. 程式人生 > 其它 >React--對axios的封裝

React--對axios的封裝

/**
 * 對axios的封裝
 */

//引入axios
import axios from 'axios';

//引入其它配置(根據具體需求按需引入)
import { history } from 'umi';


//1.建立axios例項,預設配置也可以在具體請求內複寫修改。
const instance = axios.create({
    //請求頭預設配置
    headers: {
        'x-requested-with': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
    },

    // 覆寫庫的超時預設值
    // 現在,在超時前,所有請求都會等待 5 秒
    timeout:5000,

    //apibaseURL設定
    baseURL:'http://localhost:3000',
});


// 2.新增請求攔截器
instance.interceptors.request.use((request) => {
    // 在傳送請求之前做些什麼
    
    /**
     * 新增許可權驗證
        const user: any = true;
        if (user) {
        request.headers = {
            ...request.headers,
            Authorization: user,
        };
        }
     */
    return request;

},(error)=>{

    // 對請求錯誤做些什麼(轉到錯誤頁面之類的)
    return Promise.reject(error);

});


// 3.新增響應攔截器
instance.interceptors.response.use((response) => {
    // 對響應資料做點什麼
    /**
     * 對特定api進行操作
     * if (response.config.url == '/api/auth/getCode') {
        return response;
      }
     */

    //對一些特定的後端指定錯誤進行頁面跳轉(比如許可權驗證等的)

    //返回data使用時只關注資料
    return response.data;
},(error) => {
    // 對響應錯誤做點什麼(轉到錯誤頁面之類的)
    return Promise.reject(error);
});

export default instance;