為了方便對 axios 操作，我們通常對 axios 進行二次封裝
首先在src目錄下創建utils/request.js，然后在requset.js中配置
- service.interceptors.request.use 里面設定請求頭（token）
- service.interceptors.response.use 里面是對回傳的資料進行操作
import axios from "axios";
import { base_Url } from "@/config";
import { Toast } from "vant";
// console.log(base_Url,'dad');
//基礎配置、創建axios實體
let service = axios.create({
baseURL: base_Url, //基地址
// withCredentials: true, // 是否攜帶cookies
timeout: 5000, //請求超時
});
//請求攔截
let loading;
service.interceptors.request.use(
(config) => {
//1、loading影片開啟
loading = Toast.loading({
duration: 5000,
message: "加載中...",
forbidClick: true,
});
// console.log(config);
//2、token設定 (把token添加到請求頭中) vuex(http是無狀態的)
// config.headers["Authorization"] = sessionStorage.getItem("token");
return config;
},
(error) => {
console.log(error);
return Promise.reject(error);
}
);
//回應攔截
service.interceptors.response.use(
(res) => {
//1、關閉loading
loading.clear();
console.log(res);
return Promise.resolve(res);
},
(error) => {
loading.clear();
console.log("err" + error);
return Promise.reject(error);
}
);
export default service;
介面管理
在上面utils目錄下創建一個api.js用于管理介面
- url ：介面地址
method：請求方法- data ：請求引數
import service from "./index";
//定義請求方法，然后匯出
export function Code(arg) {
return service({
url: "/smsCode",
data: arg,
method: "post",
});
}呼叫的話，在頁面中先引入，然后操作（在事件里面也一樣）
import { Code } from "@/service/api.js"async created() {
const res = await Code();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296977.html
標籤：其他