参考

axios中文文档|axios中文网 | axios (axios-js.com)

Vue封装request.js用作发送请求_vue.prototype.request-CSDN博客

环境配置

1. 安装axios: npm i axios

2. 创建request.js

// axios 封装
import axios from "axios";

// 创建axios,赋给变量service
const service = axios.create()

service.interceptors.request.use(function(config){
    console.log(config.data)
    // 在发送之前做些什么
    return config
},function(err){
    // 对错误请求做点什么
    return Promise.reject(err)
})

service.interceptors.response.use(function(config){
    console.log(config.data)
    // 对响应做些什么
    return config
},function(err){
    // 对错误做点什么
    return Promise.reject(err)
})

service.request({
    method:"get",
    url:"https://localhost:7285/WeatherForecast",
    data:{
        name:123
    }
})

export default service 

3. main.js中引用

4. 测试： 此时控制台会分别打印请求前和请求后的数据

拦截器封装

import axios from "axios";

const service = axios.create({
    baseURL:"https://localhost:7285", 
    timeout: 10000 ,
    headers: {
        Authorization : "token123"
        }
      }
)

service.interceptors.request.use(function(config){
    console.log(config.data)

    return config
},function(err){
    return Promise.reject(err)
})

service.interceptors.response.use(function(response){
     let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        console.log(res)
        return res;
},function(err){
    return Promise.reject(err)
})

service.request({
    method:"get",
    url:"/WeatherForecast",
    data:{
        name:123
    }
})

export default service