coder-Tom

一个喜欢代码， 音乐，读书， 跑步， 记录生活的程序员

0%

模拟实现axios发送请求

发表于 更新于 分类于

模拟实现axios发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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>
    <script>
        // 1. 声明构造函数
        function Axios (config){
            this.config = config
        }
        Axios.prototype.request = function (config){
            //发送请求
            //创建一个promise对象
            let promise = Promise.resolve(config)
            //声明一个数组
            let chains = [dispatchRequest, undefined] //undefined 的作用就是占位
            //调用then方法执行回调
            let result = promise.then(chains[0], chains[1])
            //返回promise的结果
            return result
        }
        // 2. dispatchRequest函数
        function dispatchRequest(config){
            // 调用适配器发送请求
            return xhrAdapter(config).then(response => {
            //    对响应的结果进行转化处理
            return response
            },err => {
                throw err
            })
        }
        // 3. adapter适配器
        function xhrAdapter (config){
            console.log('adapter函数执行了')
            return new Promise((resolve, reject)=>{
                //发送ajax请求
                let xhr = new XMLHttpRequest()
                xhr.open(config.method, config.url)
                xhr.send()
                xhr.onreadystatechange = function () {
                    //判断成功的条件
                    if(xhr.onreadystatechange = 4){
                        //判断成功的条件
                        if(xhr.status >= 200 && xhr.status < 300){
                            // 成功的状态
                            resolve({
                                //配置对象
                                config: config,
                                //响应体
                                data: xhr.response,
                                //响应头
                                headers: xhr.getAllResponseHeaders(),
                                //xhr的请求对象
                                request: xhr,
                                //响应的状态码
                                status: xhr.status,
                                //响应字符串
                                statusText: xhr.statusText
                            })
                        }else{
                            // 失败的状态
                            reject(new Error('请求失败' + xhr.status))
                        }
                    }
                    
                }
            })
        }
        // 4.创建axios函数
        let axios = Axios.prototype.request.bind(null)
        // axios的发送请求
        axios({
            method: "GET",
            url:"http://localhost:3000/posts"
        }).then(response => {
            console.log(response)
        }).catch(err => {
            console.log(err)
        })
    </script>
</body>
</html>

最终的结果就是：

image-20221004095137369