vue配置axios - 技术栈

axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js 环境。它提供了易于使用的 API 来发送异步 HTTP 请求到 REST 端点并处理响应。axios 因其简洁的 API 和广泛的浏览器兼容性而广受欢迎。

步骤一：

下载axios

在打开vue项目的编辑器 中打开终端，或者在cmd窗口 进入到项目目录下

用你的包管理器安装axios,例如使用npm包管理器：

npm i axios

步骤二：

统一接口配置

进行封装axios,需要建一个专门封装axios的工具文件（js）例如：

javascript 复制代码

//axios基础封装
import axios from "axios";
import { ElMessage } from "element-plus";
//创建一个可以发起请求获得响应的实例
const httpInstance=axios.create({
    timeout:50000
})
//配置请求拦截器
//config是拦截的数据包
httpInstance.interceptors.request.use(config=>{
    return config
},e=>{
    Promise.reject(e)
})
//配置axios的响应拦截器
httpInstance.interceptors.response.use(res=>res.data,e=>{
    if(e.response.status==401){
        ElMessage.error("请先登录")
        //跳转登陆页面

    }
    else{
        ElMessage({type:'error',message:'请重新登录'+e})
    }
    return Promise.reject(e)
})
export default httpInstance //对外暴露，用于在其他位置调用

const httpInstance=axios.create({timeout:50000})表示创建一个axios实例 ，设置了请求超时 时间是50000ms ，httpInstance.interceptors.request.use 是对请求进行拦截数据包 ，校验是否有错，没有问题返回数据包，有问题返回错误。httpInstance.interceptors.response.use 是对返回数据的时候进行拦截校验 ，上述代码的逻辑是，如果状态码是401，那么就会弹出一个错误提示框，内容为：请先登录，如果是其他的状态码，则弹出错误提示框，内容是：请重新登陆+错误。最后需要export暴露当前实例，这样其他文件才能用到。

步骤三：

创建测试API（js）文件

javascript 复制代码

import httpInstance from "@/utils/http";

export function getPeriodAll(){
    return httpInstance({
        url:'127.0.0.1:10086/user/getuserinfo'
    })
}

首先import导入我们刚才写好的工具文件 ，import工具文件暴露名from路径。ps:@路径相关说明请看主页文章：++vue路径别名配置++

定义我们要测试接口的函数 ，然后返回工具返回的值，所以写到一句代码中：return httpInstance({url:'接口地址'})，url内是你要测试的接口地址

步骤四：

在main.ts(main.js)文件中导入我们写好的测试函数：

javascript 复制代码

import {getPeriodAll} from '@/apis/testAPI'

getPeriodAll().then((res:any) =>{
    console.log(res)
})

这个函数内的逻辑是将函数的返回值输出到控制台，我们也可以根据自己的业务需求去编写内部的逻辑

步骤五：

重启测试

注意：被测试的接口要允许跨域操作

如果你是java的spring框架开发的，那么可以在控制层加上注释：@CrossOrigin

其他的你自己找吧