从vue2版本开始,vue-resource就不再被vue所维护和支持,官方也推荐使用axios,所以,从我使用axios至今,差不多有四五年了,这四五年的时间只能算是熟练应用,很多内部的实现和原理不清不楚,导致在开发的时候遇到问题,大多数情况都是凭借经验来"猜测"出答案,这就导致内心深处十分的空虚和忐忑,就像是走路的时候脚步虚浮,跌跌撞撞,一点都不平稳.刚好最近的计划是看源码,所以就从axios开始,详细的去解读整个axios的实现,希望这个系列既是笔记也是分享,让大家知道原理,理解…

axios源码的分析,到目前为止,算上第0章已经四章了,但是实际上,还都没有进入axios真正的主线,我们来简单回顾下.最开始我们构建了get请求,写了重要的buildURL方法,然后我们处理请求体请求头,响应体响应头,这样我们就可以传json对象了,然后还加入了promise,让我们可以链式点用,最后还加了错误处理,让我们可以更好的操作请求信息. 但是,大家发现了没有,目前为止我们所写的核心其实就是一个XMLHttpRequest对象,所有的内容都围绕着这个对象.代码也没有做太清晰的分割,那么…

上一篇文章,我们简单介绍了XMLHttpRequest及其他可以发起AJAX请求的API,那部分大家有兴趣可以自己去扩展学习.另外,简单介绍了怎么去读以及我会怎么写这个系列的文章,那么下面就开始真正的axios源码实现,跟紧我的步伐,你会发现其实阅读源码并不是一件很复杂的事情.另外,我在上一篇概要中附上的链接,大家一定要去看,至少要了解一下XMLHttpRequest的相关属性和方法都有哪些,因为接下来的核心内容,其实都是基于此的. 那么先来看看我们今天要来实现的内容有哪些,首先第一部分,我会创…

前面的章节我们已经可以正确的处理正确的请求,并且通过处理header.body,以及加入了promise,让我们的代码更像axios了.这一章我们一起来处理ajax请求中的错误. 一.错误处理 首先我们要知道错误有哪些类型,通常我们遇到的错误有以下几种:网络错误.超时错误和非200状态码错误.其实都不复杂我们来看下: 1.网络异常 网络异常,会触发XMLHttpRequest的onerror事件,所以我们只需要加上就可以了: request.onerror = function handleEr…

上一章我们完成了拦截器的代码实现,这一章我们来看看配置化是如何实现的.首先,按照惯例我们来看看axios的文档是怎么说的: 首先我们可以可以通过axios上的defaults属性来配置api. 我们可以自己创建一个axios实例,传入对应的可配置参数,然后还可以通过defaults来修改.其实就是后写的配置,会覆盖之前的配置.那么接下来我们就来看代码吧- 首先,我们在lib根目录下,创建一个defaults文件,在里面写下我们的默认配置: 目前来说吼,就这么几个配置. adapter这个默认配置…

到此,我们完成了axios的绝大部分的功能,接下来我们来补全一下其他的小功能. 一.withCredentials  这个参数可以可以表明是否是一个跨域的请求.那这个的使用场景是啥呢?就是我们在同域的请求的情况下,是会默认携带cookie的,跨域的话就不会携带cookie,如果我们想要跨域请求并携带cookie,那么就需要这个参数了.当然这个实现非常简单: if (!utils.isUndefined(config.withCredentials)) { request.withCredenti…

上一章,我们开发了一些简单的代码,这部分代码最最核心的一个方法就是buildURL,应对了把对象处理成query参数的方方面面.虽然我们现在可以发起简单的请求了,但是第一,我们无法接收到服务器的响应,哦不对,其实在浏览器层面,response已经是接收到了的,只是代码里还拿不到response,因为我们还没写.第二,post的请求还没实现.而处理拿到的response实际上就是处理响应体和响应头.实现post请求,实际上就是实现请求体和请求头.今天我们就来实现这四个点的内容. 思考题:get请求…

上一篇,我们扩展了Axios,构建了一个Axios类,然后通过这个Axios工厂类,创建真正的axios实例.那么今天,我们来实现下Axios的拦截器也就是interceptors.我们来简单看下Axios的interceptors的API: 首先我们来看,axios上有一个interceptors属性,该属性上还有两个属性,分别对应request和response,并且都有一个一样的use方法,该方法目前有两个参数,分别对应着Promise中的resolve和reject. 另外,你还可以通过…

前戏 在正式开始axios讲解前,让我们先想想,如何对现有的$.ajax进行简单的封装,就可以直接使用原声Promise了? let axios = function(config){ return new Promise((res, rej) => { // 发送ajax请求,一般使用$.ajax() ajax({ ...config, success(data){ res(data); }, error(e){ rej(e); } }) }) } 然后就可以 axios(...).then(…

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 文档地址:https://github.com/axios/axios axios理解和使用 1.请求配置 { // 请求服务器的URL url: '/user', // method 创建请求使用的方法 method: 'get' // baseURL 将自动加早url前面,除非 url 是一个绝对url baseURL: 'https://some-domain.com/api/' // 'transform…