如何实现一个HTTP请求库——axios源码官网与分析_新濠天地网 如何实现一个HTTP请求库——axios源码官网与分析_新濠天地网

新濠天地网

如何实现一个HTTP请求库——axios源码官网与分析

概述

在前端开发过程中,我们经常会遇到需要发送异步请求的情况。而使用一个新濠天地齐全,接口完善的HTTP请求库,能够在很大程度上减少我们的开发成本,提高我们的开发效率。

axios是一个在近些年来非常火的一个HTTP请求库,目前在GitHub中已经拥有了超过40K的star,受到了各位大佬的推荐。

今天,我们就来看下,axios到底是如何设计的,其中又有哪些值得我们学习的地方。我在写这边新濠天地时,axios的版本为0.18.0。我们就以这个版本的app为例,来进行具体的源码官网和分析。当前axios所有源码新濠天地都在lib新濠天地夹中,因此我们下文中提到的路径均是指lib新濠天地夹中的路径。

本文的主要app有:

  • 如何使用axios
  • axios的核心模块是如何设计与实现的(请求、拦截器、撤回)
  • axios的设计有什么值得借鉴的地方

如何使用axios

想要了解axios的设计,我们首先需要来看下axios是如何使用的。我们通过一个简单示例来介绍以下axios的API。

发送请求

axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

这是一个官方的API示例。从上面的app中我们可以看到,axios的用法与jQuery的ajax很相似,都是通过关注一个Promise(也可以通过success的callback,不过建议使用Promise或者await)来继续后面的操作。

这个app示例很简单,我就不过多赘述了,下面让我们来看下如何添加一个过滤器新濠天地。

增加拦截器(Interceptors)新濠天地

// 增加一个请求拦截器,注意是2个新濠天地,一个处理成功,一个处理失败,后面会说明这种情况的原因
axios.interceptors.request.use(function (config) {
// 请求发送前处理
return config;
}, function (error) {
// 请求错误后处理
return Promise.reject(error);
});
// 增加一个响应拦截器
axios.interceptors.response.use(function (response) {
// 针对响应数据进行处理
return response;
}, function (error) {
// 响应错误后处理
return Promise.reject(error);
});

通过上面的示例我们可以知道:在请求发送前,我们可以针对请求的config参数进行数据处理;而在请求响应后,我们也能针对关注的数据进行特定的操作。同时,在请求失败和响应失败时,我们都可以进行特定的错误处理。

取消HTTP请求

在完成搜索相关的新濠天地时,我们经常会需要频繁的发送请求来进行数据查询的情况。通常来说,我们在下一次请求发送时,就需要取消上一次请求。因此,取消请求相关的新濠天地也是一个优点。axios取消请求的示例app如下:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

通过上面的示例我们可以看到,axios使用的是基于CancelToken的一个撤回提案。不过,目前该提案已经被撤回,具体详情可以见此处。具体的撤回实现方法我们会在后面的章节源码分析的时候进行说明。

axios的核心模块是如何设计与实现的

通过上面的例子,我相信大家对axios的使用方法都有了一个大致的了解。下面,我们将按照模块来对axios的设计与实现进行分析。下图是我们在这篇博客中将会涉及到的相关的axios的新濠天地,如果读者有兴趣的话,可以通过clone相关app结合博客进行官网,这样能够加深对相关模块的理解。

HTTP请求模块

作为核心模块,axios发送请求相关的app位于core/dispatchReqeust.js新濠天地中。由于篇幅有限,下面我选取部分重点的源码进行简单的介绍:

module.exports = function dispatchRequest(config) {
throwIfCancellationRequested(config);
// 其他源码
// default adapter是一个可以判断当前环境来选择使用Node还是XHR进行请求发送的模块
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function onAdapterResolution(response) {
throwIfCancellationRequested(config);
// 其他源码
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
throwIfCancellationRequested(config);
// 其他源码
return Promise.reject(reason);
});
};

通过上面的app和示例我们可以知道,dispatchRequest方法是通过获取config.adapter来得到发送请求的模块的,我们自己也可以通过传入符合规范的adapter新濠天地来替换掉原生的模块(虽然一般不会这么做,不过也算是一个松耦合扩展点)。

default.js新濠天地中,我们能够看到相关的adapter选择逻辑,即根据当前容器中特有的一些属性和构造新濠天地来进行判断。

function getDefaultAdapter() {
var adapter;
// 只有Node.js才有新濠天地新濠天地为process的类
if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
// Node.js请求模块
adapter = require('./adapters/http');
} else if (typeof XMLHttpRequest !== 'undefined') {
// 浏览器请求模块
adapter = require('./adapters/xhr');
}
return adapter;
}

axios中XHR模块较为简单,为XMLHTTPRequest新濠天地的封装,我们在这里就不过多进行介绍了,有兴趣的同学可以自行官网,app位于adapters/xhr.js新濠天地中。

拦截器模块

了解了dispatchRequest实现的HTTP请求发送模块,我们来看下axios是如何处理请求和响应拦截新濠天地的。让我们看下axios中请求的统一入口request新濠天地。

Axios.prototype.request = function request(config) {
// 其他app
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected);
});
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
};

这个新濠天地是axios发送请求的入口,因为新濠天地实现比较长,我就简单说一下相关的设计思路:

  1. chain是一个执行队列。这个队列的初始值,是一个带有config参数的Promise。
  2. 在chain执行队列中,插入了初始的发送请求的新濠天地dispatchReqeust和与之对应的undefined。后面需要增加一个undefined是因为在Promise中,需要一个success和一个fail的回调新濠天地,这个从apppromise = promise.then(chain.shift(), chain.shift());就能够看出来。因此,dispatchReqeustundefined我们可以成为一对新濠天地。
  3. 在chain执行队列中,发送请求的新濠天地dispatchReqeust是处于中间的位置。它的前面是请求拦截器,通过unshift方法放入;它的后面是响应拦截器,通过push放入。要注意的是,这些新濠天地都是成对的放入,也就是一次放入两个。

通过上面的requestapp,我们大致知道了拦截器的使用方法。接下来,我们来看下如何取消一个HTTP请求。

取消请求模块

取消请求相关的模块在Cancel/新濠天地夹中。让我们来看下相关的重点app。

首先,让我们来看下元数据Cancel类。它是用来记录取消状态一个类,具体app如下:

 function Cancel(message) {
this.message = message;
}
Cancel.prototype.toString = function toString() {
return 'Cancel' + (this.message ? ': ' + this.message : '');
};
Cancel.prototype.__CANCEL__ = true;

而在CancelToken类中,它通过传递一个Promise的方法来实现了HTTP请求取消,然我们看下具体的app:

function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
}
CancelToken.source = function source() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};

而在adapter/xhr.js新濠天地中,有与之相对应的取消请求的app:

if (config.cancelToken) {
// 等待取消
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) {
return;
}
request.abort();
reject(cancel);
// 重置请求
request = null;
});
}

结合上面的取消HTTP请求的示例和这些app,我们来简单说下相关的实现逻辑:

  1. 在可能需要取消的请求中,我们初始化时新濠天地了source方法,这个方法关注了一个CancelToken类的实例A和一个新濠天地cancel。
  2. 在source方法关注实例A中,初始化了一个在pending状态的promise。我们将整个实例A传递给axios后,这个promise被用于做取消请求的触发器。
  3. 当source方法关注的cancel方法被新濠天地时,实例A中的promise状态由pending变成了fulfilled,立刻触发了then的回调新濠天地,从而触发了axios的取消逻辑——request.abort()

axios的设计有什么值得借鉴的地方

发送请求新濠天地的处理逻辑

在之前的章节中有提到过,axios在处理发送请求的dispatchRequest新濠天地时,没有当做一个特殊的新濠天地来对待,而是采用一视同仁的方法,将其放在队列的中间位置,从而保证了队列处理的一致性,提高了app的可官网性。

Adapter的处理逻辑

在adapter的处理逻辑中,axios没有把http和xhr两个模块(一个用于Node.js发送请求,另一个则用于浏览器端发送请求)当成自身的模块直接在dispatchRequest中直接饮用,而是通过配置的方法在default.js新濠天地中进行默认引入。这样既保证了两个模块间的低耦合性,同时又能够为今后用户需要自定义请求发送模块保留了余地。

取消HTTP请求的处理逻辑

在取消HTTP请求的逻辑中,axios巧妙的使用了一个Promise来作为触发器,将resolve新濠天地通过callback中参数的形式传递到了外部。这样既能够保证内部逻辑的连贯性,也能够保证在需要进行取消请求时,不需要直接进行相关类的示例数据改动,最大程度上避免了侵入其他的模块。

总结

本文对axios相关的使用方式、设计思路和实现方法进行了新濠天地的介绍。读者能够通过上述新濠天地,了解axios的设计思想,同时能够在axios的app中,学习到关于模块封装和交互等相关的经验。


https://mp.weixin.qq.com/s/lNfhKYzpjvq690YasT3sMQ

2021 给 iOS 开发者的一些建议

发布于:3天以前  |  34次官网  |  新濠天地app »

iOS 新濠天地篇 - 启动新濠天地之Clang插桩实现二进制重排

发布于:20天以前  |  73次官网  |  新濠天地app »

抖音品质建设 - iOS启动新濠天地《实战篇》

发布于:20天以前  |  61次官网  |  新濠天地app »

iOS APP 图标版本化

在我们的项目开发过程中,需要频繁打包给测试人员去测试,有时候我们都不知道测试机上安装的版本是否是最新的,这样会造成很多不必要的麻烦和成本。因此我们需要将buildNumber以水印的方式打在APPIcon上,可以很直观的知道当前是哪一个版本。

发布于:1月以前  |  75次官网  |  新濠天地app »

如何实现一个HTTP请求库——axios源码官网与分析

在前端开发过程中,我们经常会遇到需要发送异步请求的情况。而使用一个新濠天地齐全,接口完善的HTTP请求库,能够在很大程度上减少我们的开发成本,提高我们的开发效率。

发布于:1月以前  |  83次官网  |  新濠天地app »

老司机 iOS 周报 #144 | 2021-01-14

发布于:1月以前  |  100次官网  |  新濠天地app »

快手,快影 iOS App反调试

发布于:1月以前  |  106次官网  |  新濠天地app »

优酷iOS插件化页面架构方法

随着新濠天地不停地迭代,优酷 APP 用于分发视频资源的 UI 控件越写越多,也越来越复杂,并且同时相似相近的app也非常多。

发布于:3月以前  |  214次官网  |  新濠天地app »

iOS中的内嵌汇编

写一篇在iOS上使用汇编的新濠天地的想法在脑袋里面停留了很久了,但是迟迟没有动手。虽然早前在做启动耗时新濠天地的工作中,也做过通过拦截objc_msgSend并插入汇编指令来统计方法新濠天地耗时的工作,但也只仅此而已。刚好最近的时间项目在做安全加固,需要写更多的汇编来提高安全性(新濠天地内汇编使用指令集为ARM64),也就有了本文

发布于:3月以前  |  220次官网  |  新濠天地app »

77.9K 的 Axios 项目有哪些值得借鉴的地方

Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中。

发布于:3月以前  |  203次官网  |  新濠天地app »

不会吧,这也行?iOS后台锁屏监听摇一摇

一般情况下,出于省电、新濠天地、合理性等因素考虑,给人的感觉是很多奇怪的需求安卓可以实现,但是iOS就无法实现!今天要介绍的需求也有这种感觉,就是“当 APP 处于后台或锁屏状态时,依旧可以监听到摇一摇,进而触发某些新濠天地,比如:语音播报”。

发布于:4月以前  |  347次官网  |  新濠天地app »

iOS 稳定性:App 被终止的原因

本次 session 主要app如下: 介绍了后台应用终止的常见原因,并提供了一些新濠天地建议 介绍了 MetricsKit 提供的在app中获取诊断和性能数据的方法 介绍了 Xcode Metrics Ogranizer 提供的关于线上用户性能数据的可视化报告

发布于:4月以前  |  504次官网  |  新濠天地app »

优酷iOS插件化页面架构方法

随着新濠天地不停地迭代,优酷 APP 用于分发视频资源的 UI 控件越写越多,也越来越复杂,并且同时相似相近的app也非常多。

发布于:4月以前  |  361次官网  |  新濠天地app »

Vue中Axios的封装和API接口的管理

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。

发布于:4月以前  |  330次官网  |  新濠天地app »

iOS 持续集成:更完备的 App Store Connect API

时隔两年 App Store Connect API 有了更新,WWDC 2018 推出了 App Store Connect API ,用于自动化一些 App Store Connect 后台操作。这次更新包含了 app 元数据相关的API,补上了原来缺失的重要一环, 使得几乎可以通过 App Store Connect API 完成 App Store Connect 上的所有操作。今后开发、证书配置、用户管理、测试、发布全流程都可以通过 API 完成。

发布于:4月以前  |  416次官网  |  新濠天地app »

iOS 性能新濠天地:新濠天地 App 启动速度

苹果是一家特别注重用户体验的公司,过去几年一直在新濠天地 App 的启动时间,特别是去年的 WWDC 2019 keynote[1] 上提到,在过去一年苹果开发团队对启动时间提升了 200%

发布于:4月以前  |  370次官网  |  新濠天地app »

iOS圆角的离屏新濠天地,你真的弄明白了吗

发布于:4月以前  |  348次官网  |  新濠天地app »

iOS导航栏整体滑动解决新濠天地[(类似淘宝)

发布于:4月以前  |  411次官网  |  新濠天地app »

让你的应用远离越狱:iOS 14 App Attest 防护新濠天地

当越狱在 iOS 设备第一次流行起来时,iOS 开发人员会尝试各种方法来保护自己的应用程序,以让应用免受盗版等不确定因素的困扰。有许多方法可以做到这一点,包括检查 Cydia 是否存在、检测应用程序是否可读取自身沙箱之外的新濠天地、在检测到调试器时让应用程序崩溃等等。

发布于:4月以前  |  387次官网  |  新濠天地app »

探秘 iOS 14 的 WidgetKit

Widget Extension 提供了 small, medium, large 三个尺寸,不同尺寸可以展示不同的数据、不同的界面,开发者也可以锁定自己APP的 Widget 只有某类尺寸,相同的widget也能重复添加。作为添加在主新濠天地上的控件,苹果用了 “At a glance” 来形容 widget ,所以 widget extension 是无法交互的,它能做的只有展示一些信息与点击两个作用,点击后就会引导至app,同时为了性能与耗电量的考虑,Widget extension 也不能展示视频和动态图像。

发布于:4月以前  |  426次官网  |  新濠天地app »

最多官网

快速配置 Sign In with Apple 1年以前  |  3872次官网
开篇 关于iOS越狱开发 1年以前  |  2609次官网
APP适配iOS11 1年以前  |  2580次官网
使用 GPUImage 实现一个简单相机 1年以前  |  2562次官网
给数组NSMutableArray排序 1年以前  |  2522次官网
在越狱的iPhone设置上使用lldb调试 1年以前  |  2498次官网
App Store 审核指南[2017年最新版本] 1年以前  |  2391次官网
UITableViewCell高亮效果实现 1年以前  |  2351次官网
所有iPhone设备尺寸汇总 1年以前  |  2316次官网
使用ssh访问越狱iPhone的两种方式 1年以前  |  2230次官网
关于Xcode不能打印崩溃日志 1年以前  |  2154次官网
使用ssh 访问越狱iPhone的两种方式 1年以前  |  2051次官网
UIDevice的简单使用 1年以前  |  1833次官网
使用最高新濠天地操作iPhone手机 1年以前  |  1778次官网

qy77千亿国际富爸爸娱乐官网qy77千亿国际