Axios笔记（完结版）

目录

一、了解Axios

（一）了解Axios

（二）基本使用

（三）其他使用

二、基本知识

三、源码

（一）手动实现源码

（二）一些联系

---

一、了解Axios

（一）了解Axios

1. 特点

1）在浏览器端能发送ajax请求

2）能在node.js中发送http请求

3）支持promise的相关操作（API）

4）请求和响应的拦截器（能在请求之前做一些准备工作，在响应回来后对响应的结果做一些处理）

5）对请求和响应的数据做转换

6）取消请求

7）自动将结果转换成json格式数据

8）保护作用阻止XSRF攻击

2. 安装

1）使用npm（包管理工具）最后通过打包工具引入（项目使用）

$ npm install axios

2）使用bower（包管理工具）一般在页面使用script标签引入

$ bower install axios

3）使用yarn（包管理工具）（项目使用）

$ yarn add axios

4）使用jsDelivr CDN（学习阶段使用）

1. axios发送请求方法

request、get、post、put、head、delete、options、patch等一系列http请求类型方法

2. axios请求响应结构

headers：响应头信息；

data：响应体的结果（服务器响应的结果，进行了json解析）；

config：配置对象（包括了请求类型等等）；

request：原生的ajax请求对象，也就是xhlhttprequest实例对象；

status：响应状态码，statusText：响应字符串

3.请求对象

文档：https://github.com/axios/axios

4. 基本使用（发送GET、POST、PUT、DELETE请求）

1）代码实现：

      
基本使用
      发送 GET 请求
      发送 POST 请求
      发送 PUT 请求
      发送 DELETE 请求

（三）其他使用

      
基本使用
      发送 GET 请求
      发送 POST 请求
      发送 PUT 请求
      发送 DELETE 请求
    
    

二、基本知识

1. axios默认配置

    

        
基本使用
         发送GET请求 
         发送POST请求 
         发送 PUT 请求 
         发送 DELETE 请求 
    
    

2. axios实例对象

    

      
基本使用
      发送 GET 请求
      发送 POST 请求
    
  

3.axios拦截器：

请求拦截器（在发送请求前，使用函数对请求的参数和内容进行处理和检测，若请求有问题可直接进行拦截->取消，后进先执行=则后面的请求拦截器先执行）

响应拦截器（对响应的结果预处理，先进先执行=前面的响应拦截器先执行）

1）请求拦截器：

① 在真正发送请求前执行的回调函数

② 可以对请求进行检查或配置进行特定处理

③ 失败的回调函数，传递的默认是error

④ 成功的回调函数，传递的默认是config（也必须是）

2）响应拦截器

① 在请求得到响应后执行的回调函数

② 可以对响应数据进行特定处理

③ 成功的回调函数，传递的默认是response

④ 失败的回调函数，传递的默认是error

3）请求转换器：对请求头和请求体数据进行特定处理的函数

响应转换器：将响应体json字符串解析为js对象或数组的函数

4）代码

script>
      //设置一个请求拦截器，在请求拦截器中可以对请求参数进行修改
      //config：配置对象
      axios.interceptors.request.use(
        function (config) {
          console.log("请求拦截器 成功 1号");
          // config.headers.test = "I am only a header!";
          //修改 config 中的参数
          config.params = { a: 100 };
          return config;
        },
        (error) => {
          console.log("请求拦截器 失败 1号");
          return Promise.reject(error);
        }
      );

      axios.interceptors.request.use(
        function (config) {
          console.log("请求拦截器 成功 2号");
          // config.headers.test = "I am only a header!";
          //修改 config 中的参数
          config.timeout = 2000;
          return config;
        },
        (error) => {
          console.log("请求拦截器 失败 2号");
          return Promise.reject(error);
        }
      );

      //设置一个响应拦截器，可以对响应结果做一些处理
      axios.interceptors.response.use(
        function (response) {
          console.log("响应拦截器 成功 1号");
          return response;
        },
        function (error) {
          console.log("响应拦截器 失败 1号");
          return Promise.reject(error);
        }
      );

      //设置一个响应拦截器
      axios.interceptors.response.use(
        function (response) {
          console.log("响应拦截器 成功 2号");
          return response;
        },
        function (error) {
          console.log("响应拦截器 失败 2号");
          return Promise.reject(error);
        }
      );

      //发送请求
      axios({
        method: "GET",
        url: "http://localhost:3000/posts",
      })
        .then((response) => {
          console.log("自定义回调处理成功的结果");
          //console.log(response);
        })
        .catch((reason) => {
          console.log(reason);
        });
    

4.取消请求：终端启动是输入json-server --watch db.json -d +时间（如 -d 2000）

  
    

      
axios取消请求
      发送请求
      取消请求
    
  
  

三、源码

（一）手动实现源码

1.axios发送请求

2.axios请求发送过程

3.axios拦截器模拟实现

4.axios取消请求

  
    

      
axios取消请求
      发送请求
      取消请求
    
  
  

（二）一些联系

1.axios和Axios的关系

1）从语法上来说：axios不是Axios的实例；

2）从功能上来说：axios是Axios的实例；（因为axios拥有Axios实例对象上的方法）；

3）axios是Axios.prototype.request函数bind()返回的函数；

4）axios作为对象有Axios原型对象上的所有方法，有Axios对象上的所有属性；

2.instance与axios的区别

1）相同：

① 都是一个能发任意请求的函数：request(config)；

② 都有发特定请求的各种方法：get()/post()/put()/delete()；

③ 都有默认配置和拦截器属性：defaults/interceptors；

2）不同：

① 默认配置可能不一样；

② instance不具备axios后面添加的一些方法：creat()/CancelToken()/all()；

3.axios运行的整体流程

request(config) -> dispatchRequest(config) -> xhrAdapter(config)（适配器）

#END（详细见B站尚硅谷）