前言

代码来源：https://gitee.com/su_chengyong/custom-js-tool-library.git

全部代码

function axios({ method, url, params, data }) {
    // 转化为大写
    method = method.toUpperCase();
    // 返回值
    return new Promise((resolve, reject) => {
        // 四步骤
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.初始化
        // 处理 params 对象 a=100&b=200
        let str = ''
        for (let k in params) {
            str += `${k}=${params[k]}&`;
        }
        str = str.slice(0, -1);
        xhr.open(method, `${url}?${str}`);
        // 3.发送
        if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
            // Content-type mime类型设置 
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.send(JSON.stringify(data));
        } else {
            xhr.send();
        }
        // 设置响应结果类型为 json
        xhr.responseType = 'json';
        // 4.处理结果
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                // 判断响应状态码
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 成功的状态
                    resolve({
                        status: xhr.status,
                        message: xhr.statusText,
                        body: xhr.response
                    })
                } else {
                    reject(new Error('请求失败,失败的状态码为' + xhr.status));
                }
            }
        }
    })
}

axios.get = function(url, options) {
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options, { method: 'GET', url: url }));
}


axios.post = function(url, options) {
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options, { method: 'POST', url: url }));
}

axios.put = function(url, options) {
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options, { method: 'PUT', url: url }));
}

axios.delete = function(url, options) {
    // 发送 AJAX 请求 GET
    return axios(Object.assign(options, { method: 'delete', url: url }));
}

分析

1，首先，有个函数，它会返回一个promise。

function axios({ method, url, params, data }) {

    return new Promise((resolve, reject) => {
    })
}

2，四个方法都是对请求方式的封装。

axios.get = function(url, options) {
    return axios(Object.assign(options, { method: 'GET', url: url }));
}

3，XHR相关操作。这都是固定的。

const xhr = new XMLHttpRequest();

xhr.open(method, `${url}?${str}`);

if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.send(JSON.stringify(data));
} else {
    xhr.send();
}

xhr.responseType = 'json';

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            resolve({
                status: xhr.status,
                message: xhr.statusText,
                body: xhr.response
            })
        } else {
            reject(new Error('请求失败,失败的状态码为' + xhr.status));
        }
    }
}

4，拼接查询参数。a=3&b=4

// 处理 params 对象 a=100&b=200
let str = ''
for (let k in params) {
    str += `${k}=${params[k]}&`;
}
str = str.slice(0, -1);

5，成功和失败的处理。

// 判断响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
    // 成功的状态
    resolve({
        status: xhr.status,
        message: xhr.statusText,
        body: xhr.response
    })
} else {
    reject(new Error('请求失败,失败的状态码为' + xhr.status));
}