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

其他的你自己找吧

相关推荐
南雨北斗4 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪4 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss28 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海28 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手30 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪33 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪34 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__36 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工39 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主41 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端