axios 拦截器全局参数设置（request&response）

当前位置： 首页 » 文章 » axios 拦截器全局参数设置（request&response）

分类： 文章 8542阅读阅读模式

request 拦截

接口调用地址总有那么一段是一样的，如 http://www.example.com/api/getlist 或是 http://www.example.com/api/getarticle 这其中有一段是相同的。

axios 中在 request 拦截器中或 create 中添加该相同的基础 URL「http://www.example.com/api/」 ，后期调用时就可以简写这 URL ，直接 axios.get("getlist").then(...) 。

  1. axios.interceptors.request.use(
  2.   config => {
  3.     // do something ...
  4.     config.baseURL = “http://www.example.com/api/”;
  5.     config.headers['content-type'] = 'application/json';
  6.     return config;
  7.   },
  8.   err => {
  9.     return Promise.reject(err);
  10.   }
  11. );

在 request 第一个参数中写上配置，里面可以添加基础 url 及一些请求头。

 

response 拦截

返回数据时，可以封装一下返回数据，使其增加易用性，如添加自定义 resolve 和 reject 的数据处理。

  1. axios.interceptors.response.use(
  2.   res => {
  3.     return res;
  4.   },
  5.   err => {
  6.     return Promise.reject(err);
  7.   }
  8. );

 

自定义 axios 示例添加拦截

有时候不喜欢 axios 这个词，可以通过自定义示例。

  1. const api = axios.create();

这样，后期可以通过 api.get("http://www.example.com") 来调用，当然也可给其添加基础URL或请求头。

  1. const api = axios.create({
  2.   baseURL: "http://www.example.com/api/",
  3.   headers: {
  4.     'content-type':'application/json'
  5.   }
  6. });

自定义示例后，添加拦截器亦如此。

  1. api.interceptors.request.use(
  2.   config => {
  3.     // do something ...
  4.     return config;
  5.   },
  6.   err => {
  7.     return Promise.reject(err);
  8.   }
  9. );

 

 

 

 

 

 

 

 

 

 

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
最后更新：2019年2月28日 永久固定短链接地址：
本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

相关文章

评论一下

暂无评论