在你的utils下面新建一个request.js
import Vue from 'vue'
import axios from 'axios';
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 30000
});
instance.interceptors.request.use(
function (config) {
// Check if token exists
const token = localStorage.getItem('token');
console.log(token);
if (token) {
config.headers.Authorization = `${token}`;
}
return config;
},
function (error) {
console.error('Request Interceptor Error:', error);
return Promise.reject(error);
}
);
instance.interceptors.response.use(
function (response) {
if(response.status==200 && response.data && response.data.code == 200){
// 对响应数据做点什么
console.log('响应数据')
return response;
} else {
console.log('报错')
Vue.prototype.$message({
message: response.data.message,
type: 'error'
});
return Promise.reject()
}
},
function (error) {
// Handle response error
if (error.response) {
// 服务器响应了请求,但返回了错误的状态码
// 检查状态码
switch (error.response.status) {
case 400:
console.error('Bad Request', error.response.data);
break;
case 401:
console.error('Unauthorized', error.response.data);
window.location.href='/login'
break;
case 403:
console.error('Forbidden', error.response.data);
break;
case 404:
console.error('Not Found', error.response.data);
break;
case 500:
console.error('Internal Server Error', error.response.data);
break;
// 添加更多的 case 来处理其他 HTTP 状态码
default:
console.error('Response Interceptor Error:', error.response.data);
}
} else if (error.request) {
// 请求已经发起,但没有收到响应
console.error('No response received', error.request);
return
} else {
// 设置请求时触发了错误
console.error('Error', error.message);
}
// 总是返回拒绝的 Promise
return Promise.reject(error);
}
);
export default instance;
在你的api中将各个请求封住起来
import instance from "@/utils/request";
// 微信授权登录
const wxLogin = (params) => {
return instance('/weChat/wx/login', params, 'POST')
}
在页面中使用
import {wxLogin} from '@/api/login'
login(){
let obj = {
}
wxLogin(obj).then(res=>{
console.log('res',res)
})
}