![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
axios请求
文章平均质量分 67
wxiaojia
这个作者很懒,什么都没留下…
展开
-
axios(三)- 源码
0、热门请求库1、axios的特性2、axios的使用3、核心目录结构4、执行流程5、Axios 中的公共方法 6、Axios 如何支持不同的使用方式?7、 请求 / 响应拦截器是如何生效的?8、派发请求 dispatchRequest9、转换请求 / 响应数据10、适配器(adapter)处理请求11、取消请求12、取消重复请求13、总结热门请求库热门 JS HTTP 请求库特性简介Axios基于 Promise,支持浏览器和 nodeReques原创 2021-12-11 11:17:51 · 1623 阅读 · 0 评论 -
axios (十一) -- 取消重复请求
1、场景2种场景:假设页面中有一个按钮,用户点击按钮后会发起请求。如果没有对该按钮进行控制,当用户快速点击按钮时,会发出重复请求。假设在工单结果查询页面中,用户可以根据 “已审批”、“未审批” 和 “全部” 3 种查询条件来查询工单结果。如果请求的响应比较慢,当用户在不同的查询条件之前快速切换时,就会产生重复请求。处理有三种情况:(第一次请求A,第二次请求B)1、取消第一次A ,请求第二次B2、请求第一次A,取消第二次B3、请求第一次A,取消第二次B,将A请求结果给B这里用第二种理解小 t原创 2021-12-11 11:16:00 · 383 阅读 · 0 评论 -
axios(九)-- 适配器(adapter)处理请求
Axios 中的公共方法1、关键adapter 做了一件事非常简单,就是根据不同的环境 使用不同的请求。如果用户自定义了adapter,就用config.adapter。否则就是默认是default.adpter.adpter 适配浏览器的xhr,和node的http2、源码:默认适配器 default.jsimport utils from './utils'var defaults = { // ... // 请求超时时间,默认不超时 timeout: 0,原创 2021-12-11 11:13:45 · 4641 阅读 · 0 评论 -
axios(十)-- 取消请求
Axios 中的公共方法1、关键点(思路)如果要取消请求的话,可以通过调用 XMLHttpRequest 对象上的 abort 方法来取消请求:let xhr = new XMLHttpRequest();xhr.open("GET", "https://developer.mozilla.org/", true);xhr.send();setTimeout(() => xhr.abort(), 300);取消请求用xhr.abort(),那么什么时候执行这个取消请求的操作呢?得有一原创 2021-12-10 19:24:24 · 1595 阅读 · 0 评论 -
axios(八)--- 转换请求 / 响应数据
1、源码lib/core/dispatchRequest.js1、transformRequest: 对 config 中的 data 进行加工,比如对 post 请求的 data 进行字符串化 (JSON.stringify(data))2、adapter:适配器,包含浏览器端 xhr 和 node 端的 http3、transformResponse: 对服务端响应的数据进行加工,比如 JSON.parse(data)let transformData = require('./transfo原创 2021-12-10 19:05:14 · 2971 阅读 · 0 评论 -
axios(七)-- 派发请求 dispatchRequest
1、关键点dispatchRequest中主要做了两件事,先通过transformData对请求数据进行处理,然后定义适配器adapter并执行,通过 .then 方法 对adapter(适配器)resolve 出的响应数据进行处理(transformData)并返回 response,失败返回一个状态为rejected`的 Promise 对象。到此,当用户调用 axios()时,可以链式调用 Promise 的 .then() 和 .catch() 来处理业务逻辑了。2、使用生成prom原创 2021-12-10 18:59:37 · 976 阅读 · 0 评论 -
axios(六)-- 请求 / 响应拦截器是如何生效的?
1、关键点假设1个请求拦截和1个相应拦截一开始栈的数据就两个(dispatchRequest是 ajax请求)[dispatchRequest ,undefined] --> undefined 是为了后面一对一对的如果拦截器存在,就要往栈中加数据 (unshift)[rejected1, fulfilled1, dispatchRequest, undefined]请求结束后,如果还有拦截,就要继续添加,(添加在请求完后面 push)[rejected1, fulfille原创 2021-12-10 18:33:25 · 667 阅读 · 0 评论 -
axios (五)--- Axios 如何支持不同的使用方式?
1、关键axios有几种调用方式,一种是 axios({}),以函数的方式,传入config就好;一种是axios.get(), 不只是get,还有axios.request(), axios.post()等即又有对象属性,又可以用函数方式调用,而 Axios是一个大类,所以可以用bind。Axios new出来的实例是一个对象,用bind去生成一个函数,并把Axios上的方法与属性拷贝到实例instance上,就可以用axios()或者axios.get()去调用 2、使用:// 方式原创 2021-12-10 18:14:07 · 622 阅读 · 0 评论 -
axios (四)--- Axios 中的公共方法-实用的基础工具函数
axios 中的defaults 文件包含了许多公共方法????1、后续需要很多判断类型的,他们公共的代码就有Object.prototype.toString判断:Array、ArrayBuffer、FormData、ArrayBuffer、object、Date、File、Blob、Function、Stream、URLSearchParamsvar toString = Object.prototype.toString;/** * 判断是否为数组 * * @param {Object原创 2021-12-10 18:02:45 · 374 阅读 · 0 评论 -
axios(二)- axios的理解和使用
axios的文档说明:axios此处只记录部分,及对axios的封装目录:1、axios.create(config)2、请求拦截和响应拦截3、取消拦截4、请求拦截和响应拦截的实践axios.create(config)1、根据指定的配置创建一个新的axios;2、明明直接由axios()和axios.get()等方法,为什么还有设置create呢?比如有个需求,项目中有部分接口需要配置的与另外的不一样,比如一个前端应用可以向多个后端应用发送请求,baseUrl就可以根据create设置原创 2021-12-03 18:16:20 · 1751 阅读 · 0 评论 -
axios篇(一) - xhr
用XMLHttpRequest 封装请求:需求/功能:1、同axios一样,返回的是promise2、请求参数:url, method方法默认为get(可传大小写),param(挂在url上的参数),dataContent-Type: 'application/x-www-formurlencoded;chartset=utf-8',用于键值对参数,参数的键只用=链接,参数之间用&链接例如:name=%E5%B0%8F&age=12Content-Type: 'applica原创 2021-12-03 17:20:14 · 753 阅读 · 0 评论