一.為什么要對axios封裝？
axios 封裝了原生的 XHR，讓我們發送請求更為簡單，但假設在一個成百上千個 vue 檔案的專案中，我們每一個 vue 檔案都要寫 axios.get()或 axios.post() 豈不是很麻煩？后期的維護也不方便，所以我們要對 axios 進行進一步的封裝，
二.怎樣封裝？
1. 在src下面新建一個http檔案夾
（1）新建一個service檔案
（2）匯入axios包及vant中Toast組件
import axios from 'axios';
import {Toast} from 'vant';(3)創建axios、baseUrl、與超時時間
//1 創建axios baseURL 超時時間
const service = axios.create({
baseURL:"https://api.it120.cc/small4",
timeout: 5000,
})
（4）設定請求攔截器
//2 請求
service.interceptors.request.use(
(config) => {
Toast.loading({//loading
message: '加載中...',
forbidClick: true,
duration:30000,
});
return config
}, (error) => {//捕獲錯誤資訊
return Promise.reject(error)
})（5）設定回應攔截器
//3 回應
service.interceptors.response.use(
(response) => {
Toast.clear()//關閉loading
return Promise.resolve(response)
}, (error) => {
return Promise.reject(error)//對資料進一步處理
})（6）通過export匯出
export default service總：
import axios from 'axios'
import {Toast} from "vant"
//1 創建axios baseURL 超時時間
const service = axios.create({
baseURL:"https://api.it120.cc/small4",
timeout: 5000,
})
//2 請求
service.interceptors.request.use(
(config) => {
Toast.loading({//loading
message: '加載中...',
forbidClick: true,
duration:30000,
});
return config
}, (error) => {//捕獲錯誤資訊
return Promise.reject(error)
})
//3 回應
service.interceptors.response.use(
(response) => {
Toast.clear()//關閉loading
return Promise.resolve(response)
}, (error) => {
return Promise.reject(error)//對資料進一步處理
})
//4 匯出
export default service2.在新建一個app.js檔案
export function smsCode(引數名){
return service({
url:介面地址,
data:引數名,
method:請求引數
})
}3.在頁面中使用
import { 方法名：如smsCode } from "@/http/api";
async 方法名（）{
let res=await smsCode（）
}
console.log（res） log一下轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296892.html
標籤：其他