一、平常axios的請求發送方式

修改起來麻煩的一批 代碼一大串

二、axios的一次封裝

我們會在src/utils創建一個request.js的文件來存放我們的基地址與攔截器

/* 封裝axios用于發送請求 */
import axios from 'axios'/*
(1)request 相當于 Axios 的實例對象
(2)為什么要有request,而不是直接用axios* 項目開發中，有可能會有兩個基地址* 不同的接口配置不同（有的要token,有的不要token）
*/
const request = axios.create({baseURL: '/home/', // 設置基地址，博主這個請求跨域了因此我設置了代理服務器，因此基地址才這么短timeout: 5000 // 請求超時：當5s沒有響應就會結束請求
})// 添加請求攔截器，一下內容是axios的攔截器，可以不用寫
request.interceptors.request.use(function (config) {// 在發送請求之前做些什么return config},function (error) {// 對請求錯誤做些什么return Promise.reject(error)}
)// 添加響應攔截器
request.interceptors.response.use(function (response) {// 對響應數據做點什么return response.data},function (error) {// 對響應錯誤做點什么return Promise.reject(error)}
)export default request

?可見當我們寫下了基地址之后我們就完成我們的第一次封裝，引入了基地址與攔截器

三、axios的二次封裝

通俗一點來說：我們根據我們的業務來寫當前頁面需要的接口，這樣接口便于管理。比如：我A頁面需要三個接口，B頁面需要五個接口。我們在一個js文件中寫下八個接口嗎?可以但是不推薦。

我們可以嘗試將A與B兩個頁面的接口分離出來。

類似于這樣的：

原文作者?【vue2小知識】實現axios的二次封裝_axios二次封裝-CSDN博客