axios基础用法传送门(点击这里)
话不多说,直接上代码
一、在组件中调用 封装在http文件中
import axios from 'axios'
//创建axios实例
const axiosObj = axios.create({
baseURL: 'http://api.web1024.cn',
timeout: 8000,
params: {
key: 'gxn759'
}
})
/**
* 用于发送请求的通用方法
* @param {*} options 配置信息,method请求方法,params参数,path路由
* @returns
*/
async function http({method = 'get',params,path}){
let result
if(method === 'get' || method === 'delete'){
await axiosObj[method](path,{
params
}).then(res=>{
result = res.data
},err=>{
result = err
})
}else if(method === 'post' || method === 'put' || method === 'patch'){
await axiosObj[method](path,params).then(res=>{
result = res.data
},err=>{
result = err
})
}
return result
}
export default http
二、需要挂载到 Vue
的时候 直接导入文件 Vue.use(xxx)
就可以,Vuex
想用的时候, 直接导入以后直接使用就行
index.js
import axios from "axios";
import Auth from '@/assrts/js/auth/js'
import router from "@router/index.js";
// 基础配置
export const http = axios.create({
baseURL: "http://api.web1024.cn",
timeout: 8000,
params: {
key: "gxn759",
},
});
// 请求拦截器
http.interceptors.request.use(
function(config) {
if (config.url != "/login") {
config.headers["Authorization"] = Auth.getToken();
}
return config;
},
function(err) {
return Promise.reject(err);
}
);
// 响应拦截器
http.interceptors.response.use(
function(response) {
const { meta } = response.data;
if (meta.status === 403) {
window.alert("您没有权限执行该操作");
} else if (meta.status === 401) {
window.alert("你的登录信息有误,请重新登录!");
router.push({
name: "login",
query: {
redirect: window.location.hash,
},
});
}
return response;
},
function(err) {
return Promise.reject(err);
}
);
//最后
const httpPlugin = {};
httpPlugin.install = function(Vue) {
Vue.prototype.$http = http;
};