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来解析数据，不考虑请求响应失败的问题

我们可以在请求/响应拦截器中来打印异常