vue+axios常用操作

vue2+axios请求拦截

依赖项

“vue”: “^2.6.11”
“axios”: “^0.21.0”
“element-ui”: “^2.13.2”(做弹窗提示，可以不用)

http.js

// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import {Loading,Message
} from 'element-ui'
import router from '../../router/index'
// 超时时间
axios.defaults.timeout = 5000// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {// element ui Loading方法loadinginstace = Loading.service({fullscreen: true})return config
}, error => {loadinginstace.close()Message.error({message: '加载超时'})return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => { // 响应成功关闭loadingloadinginstace.close()const code = data.data.code;if (code == 401) {Message.closeAll()router.push('/')sessionStorage.removeItem('author')return data;}return data;
}, error => {loadinginstace.close()if (error.toString().indexOf('timeout')) {error = '请求超时！'}return Promise.reject(error)
})export default axios

vue2+axios设置请求头

依赖项

“vue”: “^2.6.11”
“axios”: “^0.21.0”
“element-ui”: “^2.13.2”(做弹窗提示，可以不用)

http.js

// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
if (sessionStorage.getItem("author")) {axios.defaults.headers.common["Authorization"] = sessionStorage.getItem("author");
}
// 超时时间
axios.defaults.timeout = 5000
axios.defaults.withCredentials = trueexport default axios

获取并设置请求头

api.js

import axios from '../assets/js/http'
const IP = "http://xxxx:xx" // test/*** 登录* @returns */
export function rpc_login(username,password
) {return axios.post(IP + "/auth/login", {username,password,}, {transformRequest: [function (data, headers) {if (headers.common.Authorization) {delete headers.common.Authorization;}return JSON.stringify(data);}],headers: {"Content-Type": "application/json"}})
}

a.vue

rpc_login(this.username, this.password).then((res) => {if (res.data.code == "200") {axios.defaults.headers.common["Authorization"] = res.data.data;sessionStorage.setItem("author", res.data.data);this.$router.push("/home");} else {this.$message.error(res.data.msg);}}).catch((err) => {this.$message.error(err.toString());});