首先了解一下什麼是axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

這是axios官網給出的解釋。

其次封裝後提供了那些功能

1、介面超時處理
2、介面請求時攔截
3、介面響應後攔截
4、不同狀態碼判斷

接著開始走入正題，首先安裝axios

$ npm install axios

然後在專案中新建http.js檔案

在http.js檔案中編寫如下程式碼，裡面有詳細的註釋

import axios from "axios";

// 建立axios例項
const service = axios.create({
  baseURL: 
 
'http://localhost:3000/', // 預設請求的URL路徑
  timeout: 2000, // 設定請求超時時間  
  headers: {
    "Content-Type": "application/json;charset=utf-8"
  }
})


// 新增請求攔截器
service.interceptors.request.use(function (config) {
  // 在傳送請求之前做些什麼
  return config;
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

// 新增響應攔截器
 

service.interceptors.response.use(function (response) {
  if (response.status === 200) {
    // 介面正常返回200 
    return Promise.resolve(response.data);
  } else {
    // 否則的話丟擲錯誤
    return Promise.reject(response);
  }
}, function (error) {
  // 記錄出錯的介面路徑和引數
  let ERRURl = error.response.config.baseURL + error.response.config.url;
  
 
// 判斷不同狀態碼執行相關程式
  if (error.response.status === 400) {
    alert('請求介面引數錯誤:' + ERRURl);
  }
  if (error.response.status === 404) {
    alert('請求介面路徑不存在' + ERRURl);
  }
  return Promise.reject(error);
});

export default service;

在具體頁面中引用

api是介面地址的配置檔案，呼叫介面時用 http.請求方式 完成請求

此時正常呼叫介面的情況下後臺返回的狀態碼是200

控制檯正常返回介面資料

此時將介面的引數名更改一下

這個時候後臺返回400錯誤碼

同時頁面彈出alert資訊，證明了程式碼進入到響應攔截器中

接著修改請求的路徑

由於路徑不存在，返回404狀態碼

頁面提示介面不存在

後續可以在http.js新增更多的功能，比如斷網提醒，多次連續請求只發送一次，請求時許可權驗證等等，可以根據自己的實際情況來做修改。