前端项目经验 —— axios 的使用和配置

在前端请求接口一般会使用 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，后续会持续更新相关博客，期待你的点赞和关注。