自己封装ajax

实现步骤和思路

---

目标：

模拟axios和jQuery的ajax，封装一个自己的ajax

思路：

我给这个ajax起名叫 tools，之后下文也用 tools 称呼这个自定义ajax，首先tools肯定是一个封装的函数，然后调用这个“ajax”时传入如同jquery那样的对象参数，然后它通过XMR实现功能

明确要传入tools的实参和各种情况：

tools({
   
    method: '请求方式',
    url: '资源路径',
    params: {
   },  //get参数
    data: {
   a: 1, b: 2}, //post参数① json类型
    data: 'a=1&b=2', //post参数② x-form-urlencoded字符串类型
    data: fd, //post参数③ multipart/form-data类型
    //服务器响应的数据，success函数名固定
    success(res) {
   
        console.log('接受内容转义成json')
    }
});

开始：

1. XMR四步：先搭出大体的架子，每句代码的功能已经为大家写在了注释中，如果不太清楚XHR的同学可以参考我之前一篇的ajax博客

    //1.创建xhr对象实例
    const xhr = new XMLHttpRequest();
    //2.设置请求方式和路径(均在传过来的形参里)
    xhr.open(config.method, config.url);
    //3.发送
    xhr.send();
    //4.接受响应报文和转换成json（字符串不方便处理）
    xhr.onload = function() {
   
        //用JSON.parse将字符串转json
        let obj = JSON.parse(xhr.response);
        //调用传过来形参的success方法处理转义后的json数据
        config.success(obj);
    }

2. 判断get/post，是完善之前的，并非在底下新写

    if(config.method.toUpperCase() == 'GET') {
   
        xhr.open('GET', config.url);
        xhr.send();
    } else if (config.method.toUpperCase() == 'POST') {
   
        xhr.open('POST', config.url);
        xhr.send();
    }

3. get 请求 params 参数细分，继续完善

    if(config.method.toUpperCase() == 'GET') {
   
        //params细分:
        //get无参：params值应为:undefined
        //get有参①：接受params值为字符串:a=1&b=2
        //get有参②: 接受params值为对象:需要转换为字符串
        if(typeof config.params == 'undefined') {
   
            xhr.open('GET', config.url);
        } else if (typeof config.params == 'string'