封裝屬於自己的axios請求

摘要

　　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 = 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);
  }
);