1.Axios源码深度剖析 - AJAX新王者
2.Ajax、Fetch、Axios 篇

Axios源码深度剖析 - AJAX新王者

       Axios 是一个基于 Promise 的 HTTP 请求库，支持浏览器和 Node.js 环境。其源码在 GitHub 上开源，欢迎 fork 使用并提出指正。蓝洞源码以下为 Axios 的核心目录结构说明，主要关注在 /lib/ 目录下的文件。

       在使用 Axios 时，你可能会遇到多种调用方式，本文将带你深入了解这些方式及其原理。

       首先，我们来了解一下 Axios 的基本用法。你可以使用以下几种方式发起请求：

       1. `axios(option)`：提供一个配置对象进行调用。

       2. `axios(url[, option])`：传入 URL 和配置对象。

       3. 对于 GET、DELETE 等方法：`axios[method](url[,尝临源码 option])`。

       4. 对于 POST、PUT 等方法：`axios[method](url[, data[, option]])`。

       5. 使用默认实例：`axios.request(option)`。

       通过以上方式，你可以轻松发起 HTTP 请求。

       深入源码分析，你将发现 Axios 的强大之处。通过 `axios.js` 文件的入口，核心在于 `createInstance` 方法，该方法能生成一个指向 `Axios.prototype.request` 的 Function，从而实现多种调用方式。

       在 Axios 的核心 `Axios` 类中，`request` 方法是所有功能的中枢，无论是 GET、POST 还是其他方法，最终都通过 `request` 方法实现。墨鱼模块源码

       配置项是 Axios 与用户交互的关键，它涵盖了几乎所有功能的配置。配置项从低到高优先级顺序为：默认配置对象、`defaults` 属性、`request` 方法参数。

       在使用 Axios 时，配置项是如何生效的？答案在于合并多个配置源，最终得到一个综合配置对象。

       此外，Axios 提供了拦截器系统，让你可以控制请求前后的数据处理。每个 Axios 实例都有 `interceptors` 属性，用于管理拦截器，让你实现精细的控制。

       核心的 `dispatchRequest` 方法则负责处理请求流程，包括请求适配器、串号源码发送请求、数据转换等步骤。最后，通过 Promise，你可以优雅地处理异步请求。

       数据转换器让你能轻松地在请求和响应数据之间进行转换，如将对象转换为 JSON 格式。默认情况下，Axios 自动处理 JSON 数据转换。

       在使用 Axios 时，你还能灵活地控制超时、取消请求、设置 header、携带 cookie 等功能。通过源码分析，你可以深入理解 Axios 的大象视频源码内部机制。

       总结，Axios 以其强大、灵活的功能和简洁的 API 设计，成为现代应用中不可或缺的 HTTP 请求工具。通过本文的深入探讨，你将对 Axios 的运作机制有更深刻的理解，从而更好地利用其功能。

Ajax、Fetch、Axios 篇

       Ajax是async javaScript and xml的缩写，是一种可以扩展的文本标记语言，常用于从服务端返回数据结构，现在基本都是使用 json 格式返回数据。在不刷新全局的条件下，局部刷新页面是Ajax的主要作用。

       创建Ajax实例的方法为let xhr = new XMLHttpRequest()，注意：IE6不兼容这种写法。打开请求时，配置请求前的配置项共有5个参数，包括：xhr.open([/api/'，这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头；auth表示HTTP基础验证应当用于连接代理，并提供凭据；这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。

       Axios可以说把请求这件事做到了极致，封装的很好用，浏览器支持的方法，除了IE低版本以外，最新版的浏览器都是支持的。

       Fetch是http的数据请求方式，是XMLHttpRequest的一种代替方案，没有使用到XMLHttpRequest这个类。fetch()采用模块化设计，API分散在Response对象、Request对象、Headers对象上。fetch()通过数据流（Stream对象）处理数据，对于请求大文件或者网速慢的场景相当有用。XMLHttpRequest没有使用数据流，所有的请求都必须完成后才拿到。在默认情况下fetch不会接受或者发送cookies。

       fetch(url,optionObj)基本使用中，fetch参数没有同步的设定，因为fetch是基于promise封装的本身就是异步的。fetch虽然使用的是promise封装，但是catch函数不能直接捕获到错误，需要在第一个then函数内做些操作。fetch发送post请求时，当发生的是跨域请求，fetch会先发送一个OPTIONS请求，来确认服务器是否允许接受请求，这个请求主要是用来询问服务器是否允许修改header等一些操作。服务器同意后返回，才会发送真正的请求。没有发生跨域的情况下不会产生两次请求。

       fetch的三个模块包括：Response对象、Request对象、Headers对象。

       fetch发送post两次请求的原因是在使用fetch发送post请求时如果是跨域，那么导致fetch第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

       fetch的缺点包括：get/head请求不能设置body属性；fetch请求后，服务器返回的状态码无论是多少包括(4xx,5xx)，fetch都认为是失败的，也就是使用catch也不能直接捕捉到错误，需要再第一个then中做一些处理。

       Ajax、Fetch、Axios综合中，实现一个Ajax可以将原生的Ajax封装成promise。Ajax、Axios、Fetch的区别包括：传统的Ajax利用的是XMLHttpRequest这个对象，和后端进行交互。JQueryAjax是对原生XHR的封装，多请求间有嵌套的话就会出现回调地狱的问题。axios使用promise封装xhr，解决了回调地狱问题。fetch不是XMLHttpRequest，fetch是原生的js，使用的是promise。

       fetch使用的是promise方便使用异步，没有回调地狱的问题。要实现一个Ajax请求，可以将原生的Ajax封装成promise。实现两个有顺序的Ajax请求可以使用promise.then()。Ajax解决浏览器缓存问题可以通过设置请求头，例如：anyAjaxObj.setRequestHeader("If-Modified-Since","0") 或 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。