vue?axios二次封裝的詳細解析
axios的二次封裝
npm i axios //下載axios
首先創(chuàng)建兩個文件夾在src目錄下;api和config

先在config文件夾下建立一個index.js;具體代碼如下:
export default{
baseUrl:{
dev: "http://localhost:8082/mhy", //開發(fā)環(huán)境
pro: "http://xxx.xx.xx.xx:8082/mhy", //上線環(huán)境
}
}當然我這里是因為我主要寫后端springboot,就沒有使用什么第三方前端的請求工具
在api文件夾下建立一個axios.js;對axios進行二次封裝;
import axios from "axios"
import config from "@/config"
// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev:config.baseUrl.pro
const baseUrl = config.baseUrl.pro
class HttpRequest{
//構造器
constructor(baseUrl){
this.baseUrl = baseUrl
}
//請求路徑設置
getInsideConfig(){
const config = {
baseURL:this.baseUrl,
Header:{}
}
return config
}
//添加攔截器
interceptors(instance){
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
const token = localStorage.getItem("Accept-Token");
if(token !== null && token !== ""){
config.headers["Accept-Token"] = token;
}
return config;
}, function (error) {
// 對請求錯誤做些什么
// console.log('添加請求攔截器 請求錯誤')
return Promise.reject(error);
});
// 添加響應攔截器
instance.interceptors.response.use(function (response) {
// 對響應數據做點什么
// console.log('添加請求攔截器 響應')
return response;
}, function (error) {
// 對響應錯誤做點什么
// console.log('添加請求攔截器 響應錯誤')
return Promise.reject(error);
});
}
// 二次封裝的請求
request(options) {
const instance = axios.create()
options = {...this.getInsideConfig(),...options}
this.interceptors(instance)
return instance(options)
}
}
export default new HttpRequest(baseUrl)最后在api文件夾下創(chuàng)建你需要調用的api,當然你可以寫在一個里面,也可以不同模塊分開寫
我這里是分開寫的:

然后看看具體怎么使用
fileApi.js
import axios from "./axios";
// 上傳文件圖片
export const uploadImgAPI = (param) => {
return axios.request({
url: `/uploadImg/${param.id}`,
method: "post",
data: param.formData
})
}
// 刪除一個文件
export const deleteImgAPI = (param) => {
return axios.request({
url: `/deleteImg`,
method: "post",
data: param
})
}簡單的寫一個;在組件中引入就可以使用了
import { deleteImgAPI, uploadImgAPI } from '@/api/fileApi'
當然最后你也可以全局注冊一下,然后直接通過proxy調用,也很方便,
到此這篇關于vue axios二次封裝的詳細解析的文章就介紹到這了,更多相關vue axios二次封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

