Axios-拦截器
Axios-拦截器
axios.js
在项目src文件夹下建立axios.js文件
-
建立一个实例对象,这个实例对象可以设置一些异步请求的基本信息
-
使用实例对象配置请求拦截器和响应拦截器
-
把这个实例默认暴露
和路由守卫,filter都有一些相似
import axios from "axios"
// 使用axios函数创建一个可以发送请求的实例对象
const instance = axios.create({
// 请求的基础路径
baseURL: "https://api.uomg.com",
// 超时时间(单位:毫秒)
timeout: 10000
})
// 设置请求拦截器
instance.interceptors.request.use(
function (config) {
console.log("请求拦截器")
config.headers.Accept = "application/json" // 设置请求头
return config
},
function (error) {
console.log("请求拦截器异常方法:" + error)
// 返回一个失败状态的promise
return Promise.reject(error)
}
)
//设置响应拦截器
instance.interceptors.response.use(
function (response) {
// 响应状态码为200时执行的方法
// 处理响应数据
console.log(response)
return response
},
function (error) {
// 状态码非200执行的方法
console.log(error)
return Promise.reject(error)
}
)
// 默认导出暴露instance
export default instance
App.vue
import request from "./axios.js";
导入axios时,导入我们在axios.js中暴露出的对象,不从框架中直接导入
在处理异步请求的响应时,对promise对象通常是调用await来解析数据,不考虑请求响应失败的问题
我们可以在请求/响应拦截器中来打印异常