必知必会的axios学习经(更新中)

迈不过友情╰ 2023-10-04 12:07 48阅读 0赞

#### 文章目录 ####

*  MDN文档
 *  HTTP 相关
 *   *  HTTP请求交互的基本过程
     *  HTTP 报文
     *   *  请求报文
         *  响应报文
         *  post 请求体参数格式
         *  常见的响应状态码
         *  \*\*不同类型的请求及其作用\*\*
 *  API 分类
 *  query
 *  params
 *  理解XHR
 *  区别一般http请求与ajax请求
 *  \`ajax\`的常用API
 *   *  constructor
     *  properties
     *  methods
 *  \`axios\`--\`ajax\`的封装
 *  1、axios与Axios的关系
 *  2、instance 与 axios 的区别
 *  3、axios运行的整体流程
 *  4、 Axios函数
 *  5、Axios.prototype
 *   *  promise chain
 *  6、dispatchRequest
 *  7、XHR对象 ( axios核心 )
 *  \`axios\`取消请求
 *  简介
 *  注意事项
 *  拦截器版本
 *  菜鸡版本

## MDN文档 ##

[官网][Link 1]

## HTTP 相关 ##

> \*\*超文本传输协议（HTTP）\*\*是一个用于传输超媒体文档（例如 HTML）的[应用层][Link 2]协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的[客户端-服务端模型][-]，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP 是[无状态协议][Link 3]，这意味着服务器不会在两个请求之间保留任何数据（状态）。

### HTTP请求交互的基本过程 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-soizYWXG-1619617853546)(.\\pics\\image-20210222113529319.png)\]][img-soizYWXG-1619617853546_._pics_image-20210222113529319.png]

### HTTP 报文 ###

#### 请求报文 ####

*  请求行
    
    > method url
    > 
    > GET /product\_detail?id=2
    > 
    > POST /login
 *  多个请求头
    
    > Host : `www.baidu.com`
    > 
    > Cookie: xx
    > 
    > Content-Type: application/x-www-form-urlencoded 或者 application/json
 *  请求体
    
    > username=tom&pwd=123
    > 
    > \{“username”:“tom”, “pwd”:“123” \}

#### 响应报文 ####

*  响应状态行

> status statusText

*  多个响应头

> Contetn-Type: text/html; charset=utf-8
> 
> set-cookies:BD\_CK\_SAM=1; path=/

*  响应体

> html文本、 json文本 …

#### post 请求体参数格式 ####

*  Conten-Type: application/x-www-form-urlencoded; charset=utf-8
    
    > 用于键值对参数，参数的键值用=连接，参数之间用&连接
    > 
    > `https://search.bilibili.com/all?keyword=axios&from_source=nav_search_new`
 *  Conten-Type:application/json; charset=utf-8
    
    > 用于json 字符串参数
 *  Conten-Type:multipart/form-data
    
    > 用于文件上传

#### 常见的响应状态码 ####

> 200 OK 请求成功。一般用于 GET 与 POST 请求
> 
> 201 Created 已创建。成功请求并创建了新的资源
> 
> 401 Unauthorized 未授权/请求要求用户的身份认证
> 
> 404 Not Found 服务器无法根据客户端的请求找到资源
> 
> 500 Internal Server Error 服务器内部错误，无法完成请求

#### **不同类型的请求及其作用** ####

> 1.  GET: 从服务器端读取数据
> 2.  POST: 向服务器端添加新数据
> 3.  PUT: 更新服务器端已经数据
> 4.  DELETE: 删除服务器端数据

## API 分类 ##

*  restful api
    
    > 同一个请求路径可以进行多个操作
    > 
    > GET/POST/PUT/DELETE
 *  restless api
    
    > 请求方式不决定请求的CRUD操作
    > 
    > 一个请求路径只有一个操作
    > 
    > 一般只有 GET/POST

## query ##

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-65jalMpj-1619617853553)(.\\pics\\image-20210222121357341.png)\]][img-65jalMpj-1619617853553_._pics_image-20210222121357341.png]

> 返回一个符合查询的数组

## params ##

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03oBsy0w-1619617853556)(.\\pics\\image-20210222121249616.png)\]][img-03oBsy0w-1619617853556_._pics_image-20210222121249616.png]

> 返回一个对象

## 理解XHR ##

## 区别一般http请求与ajax请求 ##

*  1.  ajax 请求是一种特别的 `http` 请求
    2.  对服务器来说，没有任何区别，但对浏览器来说不一样
    3.  浏览器端发出请求
        
         *  只有`XHR`或 `fetch`发出的请求才是`ajax`请求
    4.  ajax 引擎
        
        > 帮我们发送ajax请求的一段内置代码
    5.  浏览器接收到的数据
        
         *  一般请求：浏览器一般会直接显示响应体
            
            > 刷新或者跳转页面
         *  ajax请求： 浏览器不会对界面做任何操作，只是调用`ajax` 请求的函调的回调函数接收到数据
            
            > 程序员自己操作

## `ajax`的常用API ##

### constructor ###

1.  The `XMLHttpRequest()` constructor creates a new [`XMLHttpRequest`][XMLHttpRequest].

const xhr= new XMLHttpRequest()

### properties ###

*  [`XMLHttpRequest.onreadystatechange`][XMLHttpRequest.onreadystatechange]

> An [`EventHandler`][EventHandler] that is called whenever the `readyState` attribute changes.

*  [`XMLHttpRequest.readyState`][XMLHttpRequest.readyState] Read only

> Returns an `unsigned short`, the state of the request.

*  [`XMLHttpRequest.response`][XMLHttpRequest.response] Read only

> Returns an [`ArrayBuffer`][ArrayBuffer], [`Blob`][Blob], [`Document`][Document], JavaScript object, or a [`DOMString`][DOMString], depending on the value of [`XMLHttpRequest.responseType`][XMLHttpRequest.responseType], that contains the response entity body.

*  [`XMLHttpRequest.responseType`][XMLHttpRequest.responseType]

> It is an enumerated value that defines the response type

*  [`XMLHttpRequest.responseText`][XMLHttpRequest.responseText] Read only

> Returns a [`DOMString`][DOMString] that contains the response to the request as text, or `null` if the request was unsuccessful or has not yet been sent.

### methods ###

[`XMLHttpRequest.open()`][XMLHttpRequest.open]

> Initializes a request.

[`XMLHttpRequest.setRequestHeader()`][XMLHttpRequest.setRequestHeader]

> Sets the value of an HTTP request header. You must call `setRequestHeader()`after [`open()`][open], but before `send()`.

--------------------

[`XMLHttpRequest.send()`][XMLHttpRequest.send]

> Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.

XMLHttpRequest.open(method, url[, async[, user[, password]]])

*  method

> The [HTTP request method][] to use, such as `"GET"`, `"POST"`, `"PUT"`, `"DELETE"`, etc. Ignored for non-HTTP(S) URLs.

*  url

> A [`DOMString`][DOMString] representing the URL to send the request to.

--------------------

[`XMLHttpRequest.abort()`][XMLHttpRequest.abort]

> Aborts the request if it has already been sent.

[`XMLHttpRequest.getResponseHeader(headerName)`][XMLHttpRequest.getResponseHeader_headerName]

> Returns the string containing the text of the specified header, or `null` if either the response has not yet been received or the header doesn’t exist in the response.

const contentType = xhr.getResponseHeader("Content-Type");

[`XMLHttpRequest.getAllResponseHeaders()`][XMLHttpRequest.getAllResponseHeaders]

> Returns all the response headers, separated by [CRLF][], as a string, or `null` if no response has been received.

## `axios`–`ajax`的封装 ##

## 1、axios与Axios的关系 ##

*  1.  从语法上来说，axios不是Axios的实例
    2.  从功能上来说，axios是Axios的实例
        
         *  `axios` 具备 `Axios` 的 所有方法以及属性
    3.  `axios` 是`Axios.prototype.request`函数bind( ) 返回的函数
    4.  `axios` 作为对象有`Axios` 原型对象上的所有方法以及`Axios` 的所有属性

/**
     * Create an instance of Axios
     *
     * @param {Object} defaultConfig The default config for the instance
     * @return {Axios} A new instance of Axios
     */
    function createInstance(defaultConfig) {
        
      var context = new Axios(defaultConfig);
      
      var instance = bind(Axios.prototype.request, context);
    
      // Copy axios.prototype to instance
      utils.extend(instance, Axios.prototype, context);
    
      // Copy context to instance
      utils.extend(instance, context);
    
      return instance;
    }
    
    
    // Create the default instance to be exported
    var axios = createInstance(defaults);
    
    // Expose Axios class to allow class inheritance
    axios.Axios = Axios;
    
    // Factory for creating new instances
    axios.create = function create(instanceConfig) {
        
        
        // 合并配置
      return createInstance(mergeConfig(axios.defaults, instanceConfig));
    };
    
    // Expose Cancel & CancelToken
    axios.Cancel = require('./cancel/Cancel');
    axios.CancelToken = require('./cancel/CancelToken');
    axios.isCancel = require('./cancel/isCancel');
    
    // Expose all/spread
    axios.all = function all(promises) {
        
      return Promise.all(promises);
    };
    axios.spread = require('./helpers/spread');
    
    // Expose isAxiosError
    axios.isAxiosError = require('./helpers/isAxiosError');
    
    module.exports = axios;
    
    // Allow use of default import syntax in TypeScript
    module.exports.default = axios;

*  `Axios` 的属性

/**
     * Create a new instance of Axios
     *
     * @param {Object} instanceConfig The default config for the instance
     */
    function Axios(instanceConfig) {
        
      this.defaults = instanceConfig;
      this.interceptors = {
        
        request: new InterceptorManager(),
        response: new InterceptorManager()
      };
    }

## 2、instance 与 axios 的区别 ##

*  1.  相同
        
        1.  都是`Axios` 的实例
        2.  都是一个可以发任意请求的函数 `request(config)`
        3.  具有默认配置和拦截器属性
    2.  不同点
        
        1.  `instance` 没有`axios`后面添加的方法 （源码见`#1`）
        2.  也就是通过`const instance = axios.create()`创建的`intance`具备`Axios`的所有方法，但是没有`axios`
        3.  注意是小写的axios

后面添加的方法，比如`Cancel\CancelToken \isCancel` 等，具体见 (`#1`)

## 3、axios运行的整体流程 ##

*  1.  整体流程:

> request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)

*  1.  request(config):

> 将请求拦截器 / dispatchRequest() / 响应拦截器 通过 promise 链串连起来, 返回 promise

*  1.  dispatchRequest(config):

> 转换请求数据 ===> 调用 xhrAdapter()发请求 ===> 请求返回后转换响应数据. 返回 promise

*  1.  xhrAdapter(config):

> 创建 XHR 对象, 根据 config 进行相应设置, 发送特定请求, 并接收响应数据, 返回 promise

*  整体图

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dk7YCoPn-1619618181146)(.\\pics\\image-20210224105956948.png)\]

## 4、 Axios函数 ##

## 5、Axios.prototype ##

/**
     * Dispatch a request
     *
     * @param {Object} config The config specific for this request (merged with this.defaults)
     */
    Axios.prototype.request = function request(config) {
        
      /*eslint no-param-reassign:0*/
      // Allow for axios('example/url'[, config]) a la fetch API
      if (typeof config === 'string') {
        
        config = arguments[1] || {
        };
        config.url = arguments[0];
      } else {
        
        config = config || {
        };
      }
    
      config = mergeConfig(this.defaults, config);
    
      // Set config.method
      if (config.method) {
        
        config.method = config.method.toLowerCase();
      } else if (this.defaults.method) {
        
        config.method = this.defaults.method.toLowerCase();
      } else {
        
        config.method = 'get';
      }
        
        // 拦截器中间件的执行流程
        // reuqest interceptors : [{2},{1}]
        // response interceptors :[{11},{22}]
    
      // Hook up interceptors middleware
      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.prototype.getUri = function getUri(config) {
        
      config = mergeConfig(this.defaults, config);
      return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
    };
    
    // Provide aliases for supported request methods
    utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
        
      /*eslint func-names:0*/
      Axios.prototype[method] = function(url, config) {
        
        return this.request(mergeConfig(config || {
        }, {
        
          method: method,
          url: url,
          data: (config || {
        }).data
        }));
      };
    });
    
    utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
        
      /*eslint func-names:0*/
      Axios.prototype[method] = function(url, data, config) {
        
        return this.request(mergeConfig(config || {
        }, {
        
          method: method,
          url: url,
          data: data
        }));
      };
    });

### promise chain ###

while (chain.length) {
        
        promise = promise.then(chain.shift(), chain.shift());
      }

## 6、dispatchRequest ##

'use strict';
    
    var utils = require('./../utils');
    var transformData = require('./transformData');
    var isCancel = require('../cancel/isCancel');
    var defaults = require('../defaults');
    
    /**
     * Throws a `Cancel` if cancellation has been requested.
     */
    function throwIfCancellationRequested(config) {
        
      if (config.cancelToken) {
        
        config.cancelToken.throwIfRequested();
      }
    }
    
    /**
     * Dispatch a request to the server using the configured adapter.
     *
     * @param {object} config The config that is to be used for the request
     * @returns {Promise} The Promise to be fulfilled
     */
    module.exports = function dispatchRequest(config) {
        
      throwIfCancellationRequested(config);
    
      // Ensure headers exist
      config.headers = config.headers || {
        };
    
      // Transform request data
      config.data = transformData(
        config.data,
        config.headers,
          
          // 请求转换器， 源码位于default.js中
        config.transformRequest
      );
    
      // Flatten headers
      config.headers = utils.merge(
        config.headers.common || {
        },
        config.headers[config.method] || {
        },
        config.headers
      );
    
      utils.forEach(
        ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
        function cleanHeaderConfig(method) {
        
          delete config.headers[method];
        }
      );
    
      var adapter = config.adapter || defaults.adapter;
    
      return adapter(config).then(function onAdapterResolution(response) {
        
        throwIfCancellationRequested(config);
    
        // Transform response data
        response.data = transformData(
          response.data,
          response.headers,
          config.transformResponse
        );
    
        return response;
      }, function onAdapterRejection(reason) {
        
        if (!isCancel(reason)) {
        
          throwIfCancellationRequested(config);
    
          // Transform response data
          if (reason && reason.response) {
        
            reason.response.data = transformData(
              reason.response.data,
              reason.response.headers,
              config.transformResponse
            );
          }
        }
    
        return Promise.reject(reason);
      });
    };

## 7、XHR对象 ( axios核心 ) ##

*  axios的部分xhr源码 (Ajax请求)

## `axios`取消请求 ##

## 简介 ##

You can create a cancel token by passing an executor function to the `CancelToken` constructor:

const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.get('/user/12345', {
        
      cancelToken: new CancelToken(function executor(c) {
        
        // An executor function receives a cancel function as a parameter
        cancel = c;
      })
    });
    
    // cancel the request
    cancel();

> Note: you can cancel several requests with the same cancel token.

## 注意事项 ##

*  `cancelToken` 的首字母小写
 *  `new CancelToken(function executor(c)` 注意大写
    
    > 等价于 new CancelToken(c=>\{ \} )
 *  使用拦截器的时候注意不要定义cancel

## 拦截器版本 ##

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
      </head>
      <body>
        <button onclick="get()">获取产品1</button>
        <button onclick="post()">获取产品2</button>
        <button onclick="quxiao()">取消请求</button>
    
        <script>
          const CancelToken = axios.CancelToken;
          let cancel ;
          const instance = axios.create({
         
            baseURL: "http://localhost:3000",
          });
    
          instance.interceptors.request.use((config) => {
         
            if (typeof cancel === 'function') {
         
                cancel()
            }
            config.cancelToken = new axios.CancelToken(c=>{
         
                cancel = c
            })
            return config;
          });
    
          instance.interceptors.response.use(
              response=>{
         
                cancel = null
                console.log('请求成功')
                return response
              },
              err=>{
         
                if(axios.isCancel(err)){
         
                    // 取消请求的错误不用处理
                    console.log('请求取消的错误',err)
                    // 中断promise链
                    return new Promise(()=>{
         })
                }
                else{
         
                    // 请求出错
                    console.log('请求1失败了', err)
                    // 将错误向下传递
                    return Promise.reject(err)
                }
                  
              }
          )
    
          function get() {
         
            instance({
         
              url: "/product1",
            })
              .then((response) => {
         
                console.log(response);
              })
              .catch(err=>{
         
                console.log(err)
              })
    
          }
          function post() {
         
            instance({
         
                url:'/product2'
            })
            .then((response) => {
         
              console.log(response);
            });
          }
    
          function quxiao() {
         
            if ((typeof cancel) === 'function') {
         
                cancel('强制取消请求');
            }else{
         
                console.log('没有可以取消的请求')
            }
          }
          
        </script>
      </body>
    </html>

## 菜鸡版本 ##

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
      </head>
      <body>
        <button onclick="get()">获取产品1</button>
        <button onclick="post()">获取产品2</button>
        <button onclick="quxiao()">取消请求</button>
    
        <script>
          const CancelToken = axios.CancelToken;
          let cancel;
          const instance = axios.create({
         
            baseURL: "http://localhost:3000",
          });
    
          function get() {
         
            if ((typeof cancel) === 'function') {
         
                cancel('强制取消请求');
            }
            instance({
         
              url: "/product1",
              cancelToken: new axios.CancelToken(c=>{
         
                    cancel = c
                })
            })
              .then((response) => {
         
                cancel = null
                console.log(response);
              })
              .catch(err=>{
         
                if(axios.isCancel(err)){
         
                    // 注意如果在这里将cancel设为null 的话， 会在回调中执行， 导致后一个请求无法取消
                    // cancel = null
                    console.log('cancel取消请求1发生的错误',err.message)
                }
                else{
         
                    cancel = null
                    console.log('发送请求1发生的错误',err.message)
                }
              })
    
          }
          function post() {
         
            if ((typeof cancel) === 'function') {
         
                cancel('强制取消请求');
            }
            instance({
         
                url:'/product2',
                cancelToken: new axios.CancelToken(c=>{
         
                    cancel = c
                })
            })
            .then((response) => {
         
                // 请求成功 令牌设null
    
                cancel = null
                console.log(response);
            })
            .catch(err=>{
         
                if(axios.isCancel(err)){
         
                    // 注意如果在这里将cancel设为null 的话， 会在回调中执行， 导致后一个请求无法取消
                    // cancel = null
                    console.log('cancel取消请求2发生的错误',err.message)
                }
                else{
         
                    cancel = null
                    console.log('发送请求2发生的错误',err.message)
                }
                
            })
          }
    
          function quxiao() {
         
            if ((typeof cancel) === 'function') {
         
                cancel('强制取消请求');
            }else{
         
                console.log('没有可以取消的请求')
            }
            
          }
          
        </script>
      </body>
    </html>

> 技术参考：
> 
> 1.  尚硅谷
> 2.  MDN

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP
[Link 2]: https://en.wikipedia.org/wiki/Application_Layer
[-]: https://en.wikipedia.org/wiki/Client%E2%80%93server_model
[Link 3]: http://en.wikipedia.org/wiki/Stateless_protocol
[img-soizYWXG-1619617853546_._pics_image-20210222113529319.png]: https://img-blog.csdnimg.cn/20210428220852710.png
[img-65jalMpj-1619617853553_._pics_image-20210222121357341.png]: https://img-blog.csdnimg.cn/20210428215152877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[img-03oBsy0w-1619617853556_._pics_image-20210222121249616.png]: https://img-blog.csdnimg.cn/20210428215208582.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[XMLHttpRequest.onreadystatechange]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange
[EventHandler]: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
[XMLHttpRequest.readyState]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
[XMLHttpRequest.response]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response
[ArrayBuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
[Blob]: https://developer.mozilla.org/en-US/docs/Web/API/Blob
[Document]: https://developer.mozilla.org/en-US/docs/Web/API/Document
[DOMString]: https://developer.mozilla.org/en-US/docs/Web/API/DOMString
[XMLHttpRequest.responseType]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
[XMLHttpRequest.responseText]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText
[XMLHttpRequest.open]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
[XMLHttpRequest.setRequestHeader]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader
[open]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#open
[XMLHttpRequest.send]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send
[HTTP request method]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
[XMLHttpRequest.abort]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort
[XMLHttpRequest.getResponseHeader_headerName]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getResponseHeader
[XMLHttpRequest.getAllResponseHeaders]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders
[CRLF]: https://developer.mozilla.org/en-US/docs/Glossary/CRLF