Axios请求，如何设置拦截器？如何创建新axios实例？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

过往提及axios，总是和jquery放在一起讨论。没错，jquery的$.get()和$.post()，确实和axios.get()和axios.post()非常相似。细节上来说，axios确实有改进的地方。但是，并不是弃用jquery的理由。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0,chrome@131.0.6778.140`。

引入axios

众所周知，axios在浏览器环境下，和在纯node环境下，都是可以使用的。而jquery的ajax相关功能，就只能在纯浏览器环境下使用。

纯node环境

npm i axios --save

const axios = require('axios');

浏览器环境

可以使用cdn地址，也可以自行引入axios.js。

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

或者

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

简单使用

简单的.get和.post，非常简单。前面文章也提过好几次了。值得注意的是：两者传递参数的方式略有不同,get是两个参数，放在第二个的params里面。post是三个参数，放在第二个参数里。两者的params都会构成queryparams，放在url的后面。

axios.get("/api/get",{ params:{master: "苏南大叔"} })
.then(function (res) {
  console.log(res.data);
})
.catch(function (err) {
  console.log(err);
});

axios.post("/api/post", {master: "苏南大叔"}, { params:{a:"b"} } )
.then(function (res) {
  console.log(res.data);
})
.catch(function (err) {
  console.log(err);
});

如果这种简单代码够用，接下来的axios内容也不用看了。

拦截器

这个axios拦截器的功能，可以显著区分其它竞品。拦截器的目标，并不是拦截。而是对发出去的内容，和收回来的内容，进行批量定制。这和express的中间件，是非常类似的。

拦截器也可以定义很多个，可以反复.request.use()或者.response.use()。不过，苏南大叔觉得，拦截一次就够了。没有啥太特别的逻辑可以写啊...

拦截request

首先，它可以拦截request（官方代码里面叫做config），例如：

axios.interceptors.request.use(
  function (req) {
    // 在发送请求之前做些什么
    // console.log(req);
    // if(req.method=="get"){}
    // req.headers["Content-Type"]="application/json";
    // req.headers.token = 'basic xxxxxx';
    // req.params = Object.assign({}, { from: "test" }, req.params);
    req.headers.powerby = "sunan";
    if (req.url != "/login") {
      const accessToken = localStorage.getItem("token");
      if (accessToken) {
        req.headers.authorization = "Bearer " + accessToken;
      }
    }
    return req;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

请求的时候，发生错误。那就是代码写错了吧？这是可以预见的情况吧。所以，拦截这个请求错误的概率还是很低的。

拦截response

其次，还可以拦截response，例如：

axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    // console.log(response);
    // console.log(response.data);
    // if(res.data.code<=0){
    //   alert("异常");
    //   return response;
    // }
    // else{
    //   return response.data;
    // }
    return response.data; // 直接返回.data，以免.data.data头晕
  },
  function (error) {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // navigate('/login');
      alert("401未授权，请先登陆");
    }
    return Promise.reject(error);
  }
);

这里的error.response.status === 401，就是后续文章的伏笔。这种状态码，称之为401未授权。

全局修改配置

上面两个例子，都是全局设置拦截器的代码。实际上还可以全局修改配置信息（参考下面的例子）。

axios.defaults.baseURL="https://newsn.net/";
axios.defaults.timeout=9000;

实例化

为啥要对axios进行实例化呢？
目的就是区分不同的axios设置。比如设置了不同的baseUrl或者timeout，或者有不同的拦截器需求。
所以，新的axios实例，就意味着一个新的配置组合出炉。但是也很有可能是没有这个需求的。

const axios_1 = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 3000,
});
const axios_2 = axios.create({
  baseURL: "http://localhost:3222/",
  timeout: 10000,
});
axios_1.get("/api/get", { params: { master: "苏南大叔" } });
axios_2.post("/api/post", { master: "苏南大叔" });

同样这个实例也可以单独配置拦截器。参考代码：

axios_1.interceptors.request.use(()=>{},()=>{});
axios_1.interceptors.response.use(()=>{},()=>{});
axios_2.interceptors.request.use(()=>{},()=>{});
axios_2.interceptors.response.use(()=>{},()=>{});

相关文章

• https://newsn.net/say/js-fetch.html
• https://newsn.net/say/node-promise.html
• https://newsn.net/say/js-promise-catch.html

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。