Promise对象实现Ajax封装

Promise对象实现Ajax封装

故心故心故心故心小故冲啊

---

---

一、封装ajax

/*
*默认methods:'GET'
*默认url:'http://localhost:3306'
*默认data:null
*/
const axios = ({ methods = 'GET', url = 'http://localhost:3306', data = null }) => {
    var promise = new Promise((resolve, reject) => {
        //发送请求
        // 低版本IE兼容 
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXobject("Msxml12.XMLHTTP");
        // var xhr = new XMLHttpRequest();
        xhr.open(methods, url);
        if (methods.toUpperCase == 'GET') {
            xhr.send();
        } else {
            //post delete  put需要添加请求头
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(data))
            console.log(data);
        }
        xhr.onreadystatechange = () => {
            //请求成功
            if (xhr.readyState != 4) return;
            if (xhr.status === 200) {
                //返回数据 拿resolve接受
                resolve(xhr.responseText);
            }
            else {
                //失败 返回失败状态
                reject(xhr.status);
            }
        }
    })
    //最后返回一个promise
    return promise;
}

二、调用

//node中做了俩个测试接口
//测试
app.post('/api/test',function(req,res){
    console.log(req.body);
    res.send(JSON.stringify(data));
})

app.get('/api/test2',function(req,res){
    console.log(req.query);
    res.send(JSON.stringify(data));
})

//调用1
 document.querySelector(".btn").onclick = function () {
        //调用
        var p = axios({
            methods: 'post',
            url: 'http://localhost:3000/api/test',
            data: { 'name': 'xm', "age": 18 }
        })
        p.then(res => {
            console.log("成功了");
            //接受后端返回来是数据
            console.log(res);
        }).catch(err => {
            //接受错误信息
            console.log("失败了");
            console.log(err);
        })
    }
//调用2
  document.querySelector(".btn2").onclick = function () {
        var p2 = axios({
            methods: "get",
            url: "http://localhost:3000/api/test2?name=hahaha&&age=18",
        })
        p2.then(res => {
            console.log("成功了");
            //接受后端返回来是数据
            console.log(res);
        }).catch(err => {
            //接受错误信息
            console.log("失败了");
            console.log(err);
        })
    }

结果截图