axios 拦截器全局参数设置(request&response)

分类 文章 656阅读阅读模式

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. );

 

 

 

 

 

 

 

 

 

 

相关文章

给我留言

  • 有人回复时邮件通知我