axios入门使用笔记

￡神魔★判官ぃ 2022-11-18 05:44 235阅读 0赞

### 目录： ###

*   *  一.JOSN Server使用：
     *   *   *   *  1.安装，在终端输入：
                 *  2. 创建db.josn：
                 *  3.启动服务，终端输入：
                 *  4.得到以下信息：
     *  二.初识 axios 与配置：
     *   *   *   *  1. 安装：
     *  三.axios基本使用：
     *   *   *   *  1.基本get请求：
                 *  2.基本post请求：
                 *  3.基本put请求：
                 *  4.基本delete请求：
     *  四.axios其它方式发送请求：
     *   *   *   *  1.get请求：
                 *  2.post请求：
     *  五.axios的默认配置：
     *  六.axios创建实例对象发送请求：
     *  七.axios拦截器：
     *   *   *   *  1.基本操作：
                 *  2.失败情况：
     *  八.取消请求：
     *  九. axios源码分析：
     *   *   *   *  1.目录文件结构说明：
                 *  2.模拟axios对象创建过程 ：
     *  十.总结

## 一.JOSN Server使用： ##

JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用。  
[官方文档][Link 1]

##### 1.安装，在终端输入： #####

> npm install -g json-server

##### 2. 创建db.josn： #####

建立一个名为db.josn的文件夹，写入下面内容：

{ 
      "posts": [
        {  "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        {  "id": 1, "body": "some comment", "postId": 1 }
      ],
      "profile": {  "name": "typicode" }
    }

##### 3.启动服务，终端输入： #####

> json-server --watch db.json

##### 4.得到以下信息： #####

\{ ^_^}/ hi!    
    
      Loading db.json
      Done
    
      Resources
      http://localhost:3000/posts
      http://localhost:3000/comments
      http://localhost:3000/profile
    
      Home
      http://localhost:3000
    
      Type s + enter at any time to create a snapshot of the database   
      Watching...

## 二.初识 axios 与配置： ##

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。  
[axios中文文档][axios]

##### 1. 安装： #####

使用 npm:

> $ npm install axios

使用cdn在页面直接引用:

## 三.axios基本使用： ##

axios返回的是一个Promise结果。

##### 1.基本get请求： #####

axios({ 
                    //请求类型
                    method:'get',
                    //地址，用建好的 JSON Server地址
                    url: 'http://localhost:3000/posts/1',
                }).then(response=>{ 
                    console.log(response);
                })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

##### 2.基本post请求： #####

添加一篇文章：

axios({ 
                    //请求类型
                    method:'post',
                    //地址，用建好的 JSON Server
                    url: 'http://localhost:3000/posts',
                    //请求体
                    data:{ 
                       title:"哈哈",
                       author:"北极光之夜。"
                    }
                }).then(response=>{ 
                    console.log(response);
                })

在db.josn文件里可以看到有添加结果了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]

##### 3.基本put请求： #####

更新上面那篇文章，id是2：

axios({ 
                    //请求类型
                    method:'PUT',
                    //地址，用建好的 JSON Server
                    url: 'http://localhost:3000/posts/2',
                    //请求体
                    data:{ 
                       title:"嘻嘻",
                       author:"北极光之夜。"
                    }
                }).then(response=>{ 
                    console.log(response);
                })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]

##### 4.基本delete请求： #####

删除上面那篇文章：

btns[3].addEventListener('click',()=>{ 
                axios({ 
                    //请求类型
                    method:'delete',
                    //地址，用建好的 JSON Server
                    url: 'http://localhost:3000/posts/2',
                }).then(response=>{ 
                    console.log(response);
                })
            })

已经没了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]

## 四.axios其它方式发送请求： ##

有这么多：

axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.options(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])

来两个例子：

##### 1.get请求： #####

axios.request({ 
                   method:"get",
                   url:"http://localhost:3000/posts"
              }).then(response=>{ 
                  console.log(response);
              })

##### 2.post请求： #####

axios.post('http://localhost:3000/posts',
              { 
                "title": "嘿嘿嘿",
                "author": "北极光之夜。"
              }).then(res=>{ 
                  console.log(res);
              })

## 五.axios的默认配置： ##

可以指定将被用在各个请求的配置默认值。

原来：

btns[0].addEventListener('click',()=>{ 
               
              axios({ 
                  method: 'GET',
                  url: 'http://localhost:3000/posts'
              }).then(res=>{ 
                  console.log(res);
              })
    
            })

相当于：

//设置默认配置
            axios.defaults.method = 'GET'; //默认请求为 get
            axios.defaults.baseURL = 'http://localhost:3000'; //设置基础地址
           
            btns[0].addEventListener('click',()=>{ 
               
              axios({ 
                  url: '/posts'
              }).then(res=>{ 
                  console.log(res);
              })
    
            })

不止上面的，其它什么header，params等等配置都可以设置默认然后全局调用。

## 六.axios创建实例对象发送请求： ##

当有多个服务器需要发送请求时，这种方式比默认配置更方便。

// 创建实例对象minyan，它的默认配置如下（用一个开源接口）
            const minyan = axios.create({ 
                baseURL: 'http://poetry.apiopen.top',
                timeout: 2000
            })
            // 调用minyan，返回一句名言
            minyan({ 
                url:'/sentences'
            }).then(res=>{ 
                console.log(res.data);
            })
            // 创建实例对象shuju，它的默认配置如下
            const shiju = axios.create({ 
                baseURL: 'http://localhost:3000',
                timeout: 2000
            })
            // 调用shiju，返回自定义的json数据
            shiju({ 
                url:'/posts'
            }).then(res=>{ 
                console.log(res.data);
            })

这里实例对象的功能跟直接axios差不多一样。  
timeout: 2000指请求超时则中断。  
结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]

## 七.axios拦截器： ##

在请求或响应被 then 或 catch 处理前拦截它们。  
就像一道道关卡，满足要求放行，不满足就拦截。  
跟promise很像的。

##### 1.基本操作： #####

其中config就是配置对象，可以进行更改的。

// 添加请求拦截器
        axios.interceptors.request.use(function (config) { 
            // 在发送请求之前做些什么
            console.log('请求成功喽！');
            return config;
        }, function (error) { 
            // 对请求错误做些什么
            console.log('请求失败了~');
            return Promise.reject(error);
        });
    
        // 添加响应拦截器
        axios.interceptors.response.use(function (response) { 
            // 对响应数据做点什么
            console.log('响应成功啦！');
            return response;
        }, function (error) { 
            // 对响应错误做点什么
            console.log('响应失败阿~');
            return Promise.reject(error);
        });
       //发送一个请求看看
        axios({ 
                  method: 'GET',
                  url: 'http://localhost:3000/posts'
              }).then(res=>{ 
                  console.log(res.data);
              })

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]

##### 2.失败情况： #####

// 添加请求拦截器
        axios.interceptors.request.use(function (config) { 
            // 在发送请求之前做些什么
            console.log('请求成功喽！');
            // 抛错
            throw '参数有问题啊！';
        }, function (error) { 
            // 对请求错误做些什么
            console.log('请求失败了~');
            return Promise.reject(error);
        });
    
        // 添加响应拦截器
        axios.interceptors.response.use(function (response) { 
            // 对响应数据做点什么
            console.log('响应成功啦！');
            return response;
        }, function (error) { 
            // 对响应错误做点什么
            console.log('响应失败阿~');
            return Promise.reject(error);
        });
       //请求
        axios({ 
                  method: 'GET',
                  url: 'http://localhost:3000/posts'
              }).then(res=>{ 
                  console.log(res.data);
              }).catch(reason=>{ 
                  console.log('最终失败了');
              })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]

## 八.取消请求： ##

因为在json-server本地调用速度太快，不利于查看效果，所以给json-server一个2秒的延迟执行。  
重新启动，设置2秒延迟：

> json-server --watch db.json -d 2000

基本用法：

//2.声明全局变量
        let cancel = null;  
        //点击按钮发送请求事件 
        btns[4].onclick = function(){ 
            if(cancel!==null){ 
                //取消上一次请求
                cancel();
            }
            axios({ 
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //1.添加配置对象属性
                cancelToken: new axios.CancelToken(function(c){ 
                    //3.将c值赋值给cancel
                    cancel = c;
                })
            }).then(res => { 
                console.log(res.data);
            })
        }    
        //点击按钮取消请求事件 
            btns[5].onclick = function () { 
                //4.直接调用这个函数就会取消请求了
                cancel();
                //重新初始化
                cancel = null;
            }

## 九. axios源码分析： ##

##### 1.目录文件结构说明： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]

##### 2.模拟axios对象创建过程 ： #####

//构造函数
            function Axios(config){ 
                //初始化
                this.defaults = config;
                this.intercepters = { 
                   request:{ },
                   response:{ }
                }
            }
            //原型添加相关方法
            Axios.prototype.request = function(config){ 
                console.log("发送ajax请求,类型为:"+config.method);
            }
            Axios.prototype.get = function(config){ 
                return this.request({ method:'GET'});
            }
            Axios.prototype.post = function(config){ 
                return this.request({ method:'POST'});
            }
            //声明函数
            function createInstance(config){ 
                //实例化一个对象
                let context = new Axios(config);//可以context.get（），context.post（），但是不能当函数用，context（）
                //创建请求函数
                let instance = Axios.prototype.request.bind(context);//instance是一个函数，可以instance（{}），但不能instance.get（）.
                //将Axios.prototype对象中方法添加到instance函数对象中
                Object.keys(Axios.prototype).forEach(key=>{ 
                    instance[key]=Axios.prototype[key].bind(context);
                });
                //为instance函数对象添加属性default与intercept
                Object.keys(context).forEach(key=>{ 
                    instance[key]=context[key];
                });
                return instance;
            }
           //测试
            let axios = createInstance();
            axios({ method:'post'});

> bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

> Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

## 十.总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 8]  
其它文章：  
[ JS数据结构与算法学习笔记大全 （温故而知新，可以为师矣。）][JS_]  
[Ajax简单总结笔记][Ajax]  
[前端Promise总结笔记][Promise]  
[进我主页查看更多~][Link 2]

[Link 1]: https://www.npmjs.com/package/json-server
[axios]: http://www.axios-js.com/zh-cn/docs/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/55365b6dc4464b579d07bb2fd7fabb87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/784ceab2fa654079b6a80cb842c303bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/209eb2cb403a49c5aeea3c84664933f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/2ba45c9a7da0400b97bebaede14e6fd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221022/e00981b4c2844631a132ef07d93d9edc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221022/9cc507bedbd6420fbccfe9691b455734.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221022/eaafda27501f47409ebe4459089c31cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221022/8b3a9de2499d4511be821a220e1120b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221022/2e6e00b6a9cb497cba097c907199ee05.png
[JS_]: https://blog.csdn.net/luo1831251387/article/details/116501190
[Ajax]: https://blog.csdn.net/luo1831251387/article/details/113342765
[Promise]: https://blog.csdn.net/luo1831251387/article/details/115643059
[Link 2]: https://blog.csdn.net/luo1831251387