模拟实现axios取消请求


<!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.27.2/axios.js"></script> -->
    <style>
       
    </style>
</head>
<body>
    <div class="container">
        <h2></h2>
        <button class = 'btn btn-primary'>发送请求</button>
        <button class = 'btn btn-warning'>取消请求</button>
    </div>
    <script>
        //构造函数: 
        function Axios(config){
            this.config = config
        }
        //原型request方法
        Axios.prototype.request = function (config){
            return dispatchRequest(config)
        }
        //dispatchRequest函数
        function dispatchRequest(config){
            return xhrAdapter(config)
        }
        //xhrAdapter
        function xhrAdapter(config){
            return new Promise ((resolve, reject) => {
                // 实例化对象
                const xhr = new XMLHttpRequest()
                // 初始化
                xhr.open(config.method, config.url)
                //发送
                xhr.send()
                // 处理结果
                xhr.onreadystatechange = function (){
                    if(xhr.readyState === 4){
                        //判断结果
                        if(xhr.status >= 200 && xhr.status < 300){
                            resolve({
                                status: xhr.status,
                                statusText: xhr.statusText
                            })
                        }else{
                            reject(new Error('错误'))
                        }
                    }
                }
                //关于取消请求的处理
                if(config.cancelToken){
                    //对canceltoken对象身上的promise对象指定成功的回调
                    config.cancelToken.promise.then(value => {
                        xhr.abort();
                        // 将请求结果设置为失败
                        reject(new Error('请求已被取消'))
                    })
                    
                }
              
            })
        }
        // 创建axios函数
        const context = new Axios({})
        let axios = Axios.prototype.request.bind(context)
        // CancelToken构造函数
        function CancelToken(executor){
            //声明一个变量
            var resolvePromise;
            //为实例对象添加属性
            this.promise = new Promise((resolve) => {
                //将resolve赋值给resolvePromise
                resolvePromise = resolve
            })
            // 调用executor函数:
            executor(function (){
                //执行resolvePromise函数
                resolvePromise()
            })
        }

        const btns = document.querySelectorAll('button')
        let cancel = null ;
        btns[0].onclick = function () {
            //检测上一次的请求是否完成;
            if(cancel !== null){
                //取消上一次的请求
                cancel()
            }

            // 创建一个cancelToken的值
            let cancelToken = new CancelToken(function (c){
                cancel = c
            })
            axios({
                method: "GET",
                url: 'http://localhost:3000/posts',
                cancelToken: cancelToken
            }).then(response => {
                console.log(response)
                cancel = null;
            })
        }
        btns[1].onclick = function (){
            cancel()
        }



    </script>
</body>
</html>
为了我们很高的观察，我们在启动服务的时候加一个延时：
结果