axios——难点语法使用、拦截器的使用、取消请求功能演示

朱雀 2024-04-06 13:39 40阅读 0赞

**目录**

一、axios.create(config)

二、拦截器

2.1运行流程

三、取消请求功能演示

3.1基本流程

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

## 一、axios.create(config) ##

1.根据指定配置创建一个新的axios，也就是每个新的axios都有自己的配置

2.新axios只是没有取消请求和批量请求的方法，其他所有的语法都是一致的

3.为什么要设计这个语法？

需求：项目中有部分接口需要配置与另一部分接口需要配置不太一样，如何处理

解决：创建两个新的axios，每个都有自己特有的配置，分别应用到不同要求的接口请求中

当**有多个后端端口**时每个端口时如果单纯使用axios太麻烦**使用axios.create就非常的方便**

//创建一个新的axios
            const instance = axios.create({
                // 记得在这里定义基础路径
                baseURL:'http://localhost:4000'
            })
    
            // 使用instance发送请求（与axios发请求的功能一样，其他功能不一样）
            // 函数的形式
            // instance({
            //     url:'/posts'
            // })
            // 或者下面这个写法
            instance.get('/posts')
    
     
            axios({
                url:'http://localhost:3000'  //请求3000
            })
            // axios({
            //     url:'http://localhost:4000'  //请求4000
            // })

![78b3d9bc17654b4fabcbe0bdcab3d739.png][]

## 二、拦截器 ##

### 2.1运行流程 ###

结论： 发请求前执行请求拦截器

请求拦截器的返回必须是config

请求拦截器是先添加，后执行；响应连接器相反

响应拦截器在响应之后运行，在指定的回调函数之前（就是在then后面的函数之前），先调相应拦截器的回调，再指定请求的then的回调函数

return config 以及return response都会向下传递

return Promise.reject(error)作用：把错误继续向下传递，如果不返回错误，下面再执行另外一个响应时就进入到成功的流程

![68d67b0ae8af4f80af0ffa198dea552c.png][]

## 三、取消请求功能演示 ##

为了方便观察，我们在激动项目的时候进行延迟操作，这样更容易看到请求取消的结果

下面就是延迟两秒返回结果

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

### 3.1基本流程 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
    
        </head>
        <body>
            <button onclick="getProducts1()">发送请求</button>
            <button onclick="getProducts2()">取消发送</button>
    
            
            <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
            <script type="text/javascript">
    
            //    2.声明全局变量  
            // 作用：防止用户一直请求，给服务器增加压力，如果用户在此次请求之前还有请求的话，我们就取消之前的请求
                let cancel = null
               
                function getProducts1(){
                    if(cancel !==null){
                        // 运行到这里，说明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.data)
                        // 运行到这里的时候，说明本次请求已经请求完成了
                        // 此时将cancel的值初始化
                        cancel = null
                    })
                }
    
    
    
                // 绑定第二个时间取消请求
                function getProducts2(){
                    cancel()
                }
                
            </script>   
        </body>
    </html>

![dbcac098743049a687352b525fda32aa.png][]

[78b3d9bc17654b4fabcbe0bdcab3d739.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9c3c0d94c8884328b30038d6c786f874.png
[68d67b0ae8af4f80af0ffa198dea552c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/479e1b149861495db3cf8b9f34b1bc01.png
[dbcac098743049a687352b525fda32aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d6efe74766e8412f890883d44a87057e.png