首先創(chuàng)建一個(gè)axios.js文件

導(dǎo)入我們所需要的依賴

import axios from "axios";
import Element from 'element-ui'
import router from "./router";

設(shè)置請(qǐng)求頭和它的類型和地址

注意先注釋這個(gè)url,還沒(méi)有解決跨域問(wèn)題,不然會(huì)出現(xiàn)跨域

// axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({timeout: 5000,headers: {
//請(qǐng)求頭的格式要求為json'Content-Type': 'application/json; charset=utf-8'}
})
request.interceptors.request.use(config => {
//將localStorage中的token放入請(qǐng)求頭config.headers['Authorization'] = localStorage.getItem("token") // 請(qǐng)求頭帶上tokenreturn config
})

設(shè)置后端返回給前端數(shù)據(jù)的處理方式

//就是當(dāng)后端返回給前端code的值來(lái)回饋不同的效果
request.interceptors.response.use(response => {let res = response.data;console.log("response")console.log(res)if (res.code === 200) {return response} else {Element.Message.error(res.msg? res.msg : '系統(tǒng)異常！', {duration: 3 * 1000})return Promise.reject(response.data.msg)}},error => {console.log(error)if(error.response.data) {error.message = error.response.data.msg}if(error.response.status === 401) {router.push("/login")}Element.Message.error(error.message, {duration: 3 * 1000})return Promise.reject(error)}
)

將他暴露出來(lái)

export default request

然后在main.js中修改

import axios from 'axios'
Vue.prototype.$axios = axios //

修改為

import request from "./axios";
Vue.prototype.$axios = request

就可以了