自定义 axios

偏执的太偏执、 2022-10-15 00:47 116阅读 0赞

## 自定义 axios ##

function axios({
        
                url,
                method = 'GET',
                params = {
        },
                data = {
        }
            }) {
        
                // 返回一个 promise 对象
                return new Promise((resolve, reject) => {
        
                    // 处理 query 参数（拼接到url上） id=1&xxx=abc
                    // {id: 1, xxx: 'abc'}
                    let queryString = ''
                    Object.keys(params).forEach(key => {
        
                        queryString += `${
          key}=${
          params[key]}&`
                    })
                    if (queryString) {
        
                        // 取出最后的 &
                        queryString = queryString.substring(0, queryString.length - 1)
                        // 连接到 url
                        url += '?' + queryString
                    }
                    // 1.执行异步 ajax 请求
                    // 创建 xhr 对象
                    const request = new XMLHttpRequest()
                    // 打开连接（初始化请求，还没有请求）
                    request.open(method, url, true)
                    // 发送请求
                    if (method === 'GET' || method === 'DELETE') {
        
                        request.send()
                    } else if (method === 'POST' || method === 'PUT') {
        
                        // 告诉服务器请求的格式是 json
                        request.setRequestHeader('Content-Type', 'application/json;chaset=utf-8')
                        // 发送 json 格式请求体数据
                        request.send(JSON.stringify(data))
                    }
    
                    // 绑定状态改变的监听
                    request.onreadystatechange = function() {
        
                        // 如果请求没有完成，直接结束
                        if (request.readyState !== 4) {
        
                            return
                        }
                        // 如果状态码在 [200, 300) 范围内表示成功，否则失败
                        const {
        status, statusText} = request
                        // 2.1 如果请求成功了，调用 resolve()
                        if (status <= 200 && status < 300) {
        
                            // 准备结果数据对象 response
                            const response = {
        
                                data: JSON.parse(request.response),
                                status, 
                                statusText
                            }
                            resolve(response)
                        } else {
         // 2.2 如果请求失败了，调用 reject()
                            reject(new Error('request error status is ' + status + ',' + statusText))
                        }
                    }
                })
            }