axios 中使用请求响应拦截器_axios响应拦截

axios 简介：

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios的特性：

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

概述：什么是请求响应拦截器？

所谓的拦截器就是 在请求或响应被 then 或 catch 处理前拦截它们。简单的来说就是，当我们发起一个请求前，如果设置了请求拦截器，则会优先执行拦截器里面的方法，我们可以在请求正式发向后端服务器之前，对此次的请求 进行“二次加工”, 然后再放行给后端服务器，同理，响应拦截器就是对请求回来的数据，做统一处理，如解构等，然后再把处理好的数据，返回给页面，页面就可以直接收到，处理好的数据，同时，拦截器还能够对，错误请求或错误响应，做出统一的管理提示，可以理解成，拦截器就是我们和服务器交互请求时的，安全保障员。

配置使用请求响应拦截器：

import axios from "axios";   //导入原始 axios 方法 ，并在后面为其关联上拦截器


// 添加请求拦截器
axios.interceptors.request.use(config => {  //接收一个参数，可以拿到我此次请求的所有信息
    // 在发送请求之前做些什么
    config.timeout = 90000 // 例如配置添加超时时间
    return config;        //最后将 处理好的请求信息返回出去，就代表放行
  },error => {              //请求错误时，会触发这里，同样能拿到请求错误的信息
    // 对请求错误做些什么
    return Promise.reject(error);
  });





// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, error=> {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么

  if (error.response.status === 404) {        //例如，在这里面可以配置，后台响应错误的数据处理提示
       Message({
        message: "请求地址出错",
        type: "warning"
      })
    } else (error.response.status === 500) {
      Message({
        message: "请求接口出错 500",
        type: "warning"
      })
    }
    // return Promise.reject(error.response) // 返回接口返回的错误信息
    
    return new Promise(() => { })         //这里如果，直接返回一个 new Promise ，则在页面中，不会收到任何返回值，
    //不论是，请求成功还是败，都不会返回，这样一来，页面中调用，axios 请求方法时，就不用再定义 then 和 catch  方法了，因为，如果请求错误，就没有返回值，有返回值，
    //就代表一定请求成功，这样，会是的页面里的代码更加精简 
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

总结

好了以上，就是给大家带来的 axios 请求响应拦截器的使用，感谢小伙伴的阅读支持！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/57163