import axios from "axios";
//pinia的仓库
import { GlobalStore } from "../stores";
// let globalStore = GlobalStore()
const config = {
baseURL: "http://127.0.0.1:3000",
timeout: 5000,
withCredentials: false
}
class RequestHttp {
service = null
constructor(config) {
this.service = axios.create(config)
/**
* @description 请求拦截器
* 客户端发送请求 -> [请求拦截器] -> 服务器
* token校验(JWT) : 接受服务器返回的token,存储到vuex/pinia/本地储存当中
*/
this.service.interceptors.request.use((config) => {
const globalStore = GlobalStore();
const token = globalStore.token;
return { ...config, headers: { ...config.headers, "x-access-token": token } }
}, (err) => {
return Promise.reject(error);
})
/**
* @description 响应拦截器
* 服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
*/
this.service.interceptors.response.use(
(res) => {
const { data } = res
const globalStore = GlobalStore();
// if(data.code==200){
// }
return data
},
async (err) => {
return Promise.reject(err)
}
)
}
get(url, params = {}) {
return this.service.get(url, params)
}
post(url, params = {}) {
return this.service.post(url, params)
}
}
export default new RequestHttp(config)
最后
以上就是无奈故事最近收集整理的关于vue的axios封装的全部内容,更多相关vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复