axios 中使用请求响应拦截器-Toy模板网

这篇具有很好参考价值的文章主要介绍了axios 中使用请求响应拦截器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

axios 简介：

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

axios的特性：

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

axios响应拦截器,Ajax,前端,javascript,http,https,node.js

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

所谓的拦截器就是在请求或响应被 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  方法了，因为，如果请求错误，就没有返回值，有返回值，
    //就代表一定请求成功，这样，会是的页面里的代码更加精简 
  });

总结

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

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————文章来源地址https://www.toymoban.com/news/detail-597162.html

到了这里，关于axios 中使用请求响应拦截器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！