自定义 axios

自定义 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))
                    }
                }
            })
        }