在前端请求接口一般会使用 Ajax,但是在项目中使用 axios 能使我们更好的维护和阅读;axios 是经过封装好的 Ajax,有内置请求拦截器和响应拦截器等好处,在写代码时也方便我们统一代码风格;接下来将为你介绍如何使用 axios。
安装 axios
npm install axios
配置 axios 文件
创建 axios
// 导入axios
import axios from "axios";
const service = axios.create({
baseURL: "/api", // 请求的目标地址
timeout: 30000, // 超时取消请求的时间
// 请求头设置
headers: {
"Content-Type": "application/json;charset=utf-8", //表单数据转化
},
});
配置拦截器
拦截器可以在接口请求前和响应前拦截,做一请求或者报错的处理
// axios请求拦截器
service.interceptors.request.use(
// 当前请求中请求头、请求体等信息
(config) => {
console.log("请求配置", config);
return config;
},
// 请求错误的处理
(error) => {
return Promise.reject(error);
}
);
// axios响应拦截器
service.interceptors.response.use(
// res是接口请求成功响应的结果
(res) => {
return res;
},
(error) => {
return Promise.reject(error);
}
);
导出配置文件
最后将 service 导出,完整代码如下:
// 导入axios
import axios from "axios";
const service = axios.create({
baseURL: "/api", // 请求的目标地址
timeout: 30000, // 超时取消请求的时间
// 请求头设置
headers: {
"Content-Type": "application/json;charset=utf-8", //表单数据转化
},
});
// axios请求拦截器
service.interceptors.request.use(
// 当前请求中请求头、请求体等信息
(config) => {
console.log("请求配置", config);
return config;
},
// 请求错误的处理
(error) => {
return Promise.reject(error);
}
);
// axios响应拦截器
service.interceptors.response.use(
// res是接口请求成功响应的结果
(res) => {
return res;
},
(error) => {
return Promise.reject(error);
}
);
export default service;
使用 axios
接下来我们使用配置好的 axios 来发起一次请求,首先新建一个接口文件来存放你要请求的接口,代码如下:
添加接口文件
// test.js
// 导入写好的配置文件
import service from "配置文件的路径";
// 定义你的接口请求方法,然后导出该方法,到对应的页面调用该方法请求接口
export const test = (data, params) => {
// 返回我们配置好的 service,
return service({
method: "post", // 定义请求方式,get、post
url: `请求的路径,会拼在基础路径后面`, // 请求的路径,会拼在基础路径后面
data, // object 请求体,放在该对象中的参数一般不会拼接在请求路径后面
params, // object 会拼接请求路径后的参数
});
};
导入接口发起请求
接着在你想要请求的页面去导入对应写好的接口,这里使用 vue3 作为示例,并且推荐使用 async 和 await 做异步请求,提高代码阅读性。
// 导入写好的接口
import { test } from "@/server/api/test";
import { onBeforeMount } from "vue";
// 定义一个请求的方法 这里使用 async await 来做异步请求,和 try catch 来做处理
const testReqFun = async () => {
// 接着做好你一系列例如参数调整、封装token等逻辑处理后,调用接口:
// 使用 try 来写有可能会报出错误的请求,比如我们请求接口有时候会因为各种原因而报错,所以要再catch中做异常处理
try {
// 获取返回来的响应数据,并且使用 await 等待接口请求完毕,拿到数据后,再做后面的逻辑处理
let res = await test();
// 请求成功后在此处做数据或其他处理...
console.log(res);
} catch {
// 在这里做报错后的异常处理
// ...
}
};
// 方法定义完成后可以在你需要的地方去调用,比如 vue 中的生命周期函数
onBeforeMount(() => {
testReqFun();
});
至此,axios 的基本使用已经介绍完毕,有疑惑可以留言给我或者查看Axios中文文档。
这里是Matcha,坚持每天都输出文章&博客&观点,对本文章若有疑惑可以在评论区留言或者私聊我,我每天都会追踪最新消息和即使回复;目前我正在学习 three.js,后续会持续更新相关博客,期待你的点赞和关注。