axios的介绍与使用

一、关于axios的介绍

1.1 axios是什么？

前端最流行的 ajax 请求库
react/vue 官方都推荐使用 axios 发 ajax 请求
文档: https://github.com/axios/axios

1.2 axios的特点

基于 xhr + promise 的异步 ajax 请求库
浏览器端/node 端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

1.3 axios常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

1.4 难点语法的理解和使用

1.4.1. axios.create(config)

根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?
- 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
  样, 如何处理
解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要
求的接口请求中

拦截器函数/ajax 请求/请求的回调函数的调用顺序

说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响
应拦截器 2 => 请求的回调
注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应
拦截器传递的是 response

1.4.2. 取消请求

基本流程
配置 cancelToken 对象
缓存用于取消请求的 cancel 函数
在后面特定时机调用 cancel 函数取消请求
在错误回调中判断如果 error 是 cancel, 做相应处理
实现功能
点击按钮, 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求

二、使用

1.引入axios
引入axios有以下几种方法
1.1 通过cdn引入，在html页面中加上这行代码

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>

1.2 通过npm包管理工具引入（需要有node.js环境）
打开命令行工具，输入以下命令然后回车

npm install axios

1.3 通过yarn包管理工具引入

yarn add axios

我们来测试以下是否引入成功，在html的body节点中增加script节点，并在其内输入console.log(axios)

<body>
  <script>
    console.log(axios);
  </script>
</body>

在浏览器中打开，查看控制台，有如下界面则说明axios引入成功
在这里插入图片描述

2.发送几个请求练练手先

在这里插入图片描述
这里的html结构是这样的

<body>
  <div class="container">
    <button class="btn btn-danger">发送GET请求</button>
    <button class="btn btn-primary">发送POST请求</button>
    <button class="btn btn-success">发送PUT请求</button>
    <button class="btn btn-info">发送DELETE请求</button>
  </div>
  <script>
  </script>
  </body>

2.1 点击按钮发送GET请求

  <script>
    // 获取按钮
    const btn = document.querySelectorAll('button')

    btn[0].addEventListener('click', function () {
    
    

      // 使用axios发送ajax请求
      axios({
    
    
        // 请求类型
        method: 'GET',
        // url
        url: 'http://localhost:3000/posts/2'
      }).then(res => {
    
    
        console.log(res);
      })
    })
  </script>

查看结果
在这里插入图片描述
查看结果

2.2 发送POST请求

    // 发送POST请求,添加一篇新文章
    btn[1].onclick = function () {
    
    
      // 发送ajax请求
      axios({
    
    
        // 请求类型
        method: 'POST',
        // url
        url: 'http://localhost:3000/posts',
        // 设置请求体
        data: {
    
    
          title: 'hello',
          author: '张居然'
        }
      }).then(res => {
    
    
        console.log(res);
      })

查看结果
在这里插入图片描述

2.3 发送PUT请求，修改一条数据

    // 发送PUT请求，修改内容
    btn[2].onclick = function () {
    
    
      // 发送ajax请求
      axios({
    
    
        // 请求类型
        method: 'PUT',
        // url
        url: 'http://localhost:3000/posts/3',
        // 设置请求体
        data: {
    
    
          title: 'hello',
          author: '里斯'
        }
      }).then(res => {
    
    
        console.log(res);
      })
    }

查看结果
2.4 发送delete请求，删除一条数据

    // 发送delete请求，删除一条内容
    btn[3].onclick = function () {
    
    
      // 发送ajax请求
      axios({
    
    
        // 请求类型
        method: 'DELETE',
        // url
        url: 'http://localhost:3000/posts/4',

      }).then(res => {
    
    
        console.log(res);
      })
    }

查看结果
在这里插入图片描述

三、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]])

下面将使用axios.request()方法和axios.post()方法做一个演示，其他的方法使用步骤都是类似于这两种方法的
3.1 axios.request()方法

html结构同上

点击发送GET请求

  <script>
    // 获取按钮
    const btn = document.querySelectorAll('button')

    // 发送GET请求
    btn[0].addEventListener('click', function () {
    
    

      // 发送ajax请求
      axios.request({
    
    
        // 请求类型
        method: 'GET',
        URL,
        url: 'http://localhost:3000/comments'
      }).then(res => {
    
    
        console.log(res);
      })
    })
  </script>

查看结果
在这里插入图片描述
点击发送axios.post()请求

注意post方法的参数（url，{data}，{一些配置项}）

    btn[1].onclick = function () {
    
    
      axios.post('http://localhost:3000/comments', {
    
    
        body: '哇，太胖了',
        postId: 2
      }).then(res => {
    
    
        console.log(res);
      })
    }

查看结构
在这里插入图片描述

四、还可以给axios添加一些默认配置

    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //默认配置
        axios.defaults.method = 'GET';//设置默认的请求类型为 GET
        axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
        axios.defaults.params = {
    
    id:100};
        axios.defaults.timeout = 3000;//

        btns[0].onclick = function(){
    
    
            axios({
    
    
                url: '/posts'
            }).then(response => {
    
    
                console.log(response);
            })
        }

    </script>

4.1 给axios创建实例对象

    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        
        //创建实例对象  /getJoke
        const duanzi = axios.create({
    
    
            baseURL: 'https://api.apiopen.top',
            timeout: 2000
        });

        const onather = axios.create({
    
    
            baseURL: 'https://b.com',
            timeout: 2000
        });
        //这里  duanzi 与 axios 对象的功能几近是一样的
        // duanzi({
    
    
        //     url: '/getJoke',
        // }).then(response => {
    
    
        //     console.log(response);
        // });

        duanzi.get('/getJoke').then(response => {
    
    
            console.log(response.data)
        })
    </script>

五、拦截器

    <script>
        // Promise
        // 设置请求拦截器  config 配置对象
        axios.interceptors.request.use(function (config) {
    
    
            console.log('请求拦截器 成功 - 1号');
            //修改 config 中的参数
            config.params = {
    
    a:100};

            return config;
        }, function (error) {
    
    
            console.log('请求拦截器 失败 - 1号');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function (config) {
    
    
            console.log('请求拦截器 成功 - 2号');
            //修改 config 中的参数
            config.timeout = 2000;
            return config;
        }, function (error) {
    
    
            console.log('请求拦截器 失败 - 2号');
            return Promise.reject(error);
        });

        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
    
    
            console.log('响应拦截器 成功 1号');
            return response.data;
            // 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);
        });
    </script>

六、取消请求

    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].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(response => {
    
    
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }

        //绑定第二个事件取消请求
        btns[1].onclick = function(){
    
    
            cancel();
        }
    </script>