vue配置axios

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

步骤一：

下载axios

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

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

npm i axios

步骤二：

统一接口配置

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

//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）文件

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)文件中导入我们写好的测试函数：

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

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

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

步骤五：

重启测试

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

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

其他的你自己找吧

原文地址：https://blog.csdn.net/Wgq0731/article/details/142344707

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！