封裝屬於本身的axios請求

摘要

　　axios是一個基於promise的HTTP庫，能夠用於瀏覽器中進行AJAX請求處理。在項目中，爲了實現通用性，封裝了一個axios請求。

 

axios封裝

一、配置環境變量

// 根據不一樣環境變量選擇不一樣的接口服務器域名
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 處理前攔截它們，在發送請求以前能夠作些處理或者對請求錯誤作些什麼處理。具體配置能夠參考官網。

// 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攔截器

 

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