怎样封装一个简单的ajax请求，自己动手封装一个AJAX函数

简单封装了一个ajax请求，做一下统一处理，少写重复代码，只是一个初步的代码，没有经过优化。

$.extend({
    myAjax: function (option, rollBack) {
        var that = this;
        var myOption = {
            type: "post",
            timeout: 10000,
            success: function (data) {
                data = $.eval(data);
                if (data.hasOwnProperty("Success")) {
                    if (data.Success) {
                        if (rollBack)
                            rollBack(data);
                        else {
                            swal(data.Message, "", "success");
                        }
                    }
                    else {
                        console.info(data);
                        swal(data.Message, "", "info");
                    }
                } else {
                    if (rollBack)
                        rollBack(data);
                } 
            },
            error: function (data) {
                if (data.statusText == "timeout") {
                    swal("处理数据超时，请稍后再试", "", "info");
                } else {
                    swal("后台出现错误，请稍后再试", "", "info");
                }
                console.info(data);
            }
        };
        myOption = $.extend(myOption, option);
        $.ajax(myOption);
    }
});

一、AJAX有哪些功能？
客户端的JS发起请求（浏览器上的）
服务端的JS发送响应（Node.js上的）
1、JS 可以设置任意请求 header 吗？

第一部分 request.open(‘get’, ‘/xxx’)

第二部分 request.setHeader(‘content-type’,‘x-www-form-urlencoded’)

第四部分 request.send(‘a=1&b=2’)

2、JS 可以获取任意响应 header 吗？

第一部分 request.status / request.statusText

第二部分 request.getResponseHeader() / request.getAllResponseHeaders()

第四部分 request.responseText

二、window.jQuery.ajax
之前写过window.jQuery，具体内容可以看我的这篇总结：初学jQuery，从封装函数开始。而这次写window.jQuery.ajax。

封装AJAX函数，JS代码如下：

window.jQuery.ajax = function(obj){
    let url=obj.url
    let method=obj.method
    let body=obj.body
    let successFn=obj.successFn
    let headers=obj.heaaders
    let failFn=obj.failFn
    let request = new XMLHttpRequest()
    request.open(method, url) // 配置request第一部分
    for(let key in headers){
        let value = headers[key];
        request.setRequestHeader(key,value)
    }
    request.onreadystatechange = ()=>{
        if(request.readyState===4){
            if(request.status >= 200 && request.status < 300){
                successFn.call(undefined,x)
                //假如同时调用f1和f2可以这样写这里的x===request.responseText
                //f1.call(undefined,x)
                //f2.call(undefined,x)           
            }else if(request.status >= 400){
                failFn.call(undefined,request)
            }
        }
    }
    request.send(body)//设置请求的第四部分
}

补充一个ES 6的知识点：解构赋值。所以上面声明的前6个let可以用解构赋值来优化代码，到文末的时候我再修改。

var a=1
var b=2;
[a,b]=[2,1]    //a与b的值交换

函数调用方式：

window.jQuery.ajax({
    url:'/xxx',
    method:'post',
    body:'a=1&b=2',
    headers:{
        'content-type':'application/x-www-form-urlencoded',
        'yukaka':'25'
    },
    successFn:function sss(x){console.log(x)},
    failFn:function fff(resquest){console.log('失败了')}  
})

然而successFn 和 failFn 是我定义的。不同的程序员可能回调函数名是不一样，那么在用一个封装过的函数就需要查看手册了传什么样的参数。这不是很方便，那怎么办呢?

三、用Promise来优化函数

用法如下：

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

用Promise优化AJAX函数：

window.jQuery.ajax = function({url,method,body,headers}){ //这里使用ES6 解构赋值
    return new Promise(function(resolve,reject){   //resolve表示成功，reject表示失败
        let request = new XMLHttpRequest()
        request.open(method, url) // 配置request第一部分
        for(let key in headers){  //遍历，设置请求第二部分
            let value = headers[key];
            request.setRequestHeader(key,value)
        }
        request.onreadystatechange = ()=>{  //获取readyState码
            if(request.readyState===4){
            if(request.status >= 200 && request.status < 300){   //异步操作成功
                  resolve.call(undefined,request.responseText)        
             }else if(request.status >= 400){
                  rejcet.call(undefined,request)
              }
            }
        }
        request.send(body)//设置请求的第四部分
    })
}

函数调用方式：

myButton.addEventListener('click', (e)=>{
    window.jQuery.ajax({
        url:'/xxx',
        method:'post',
        body:'a=1&b=2',
        headers:{
           'content-type':'application/x-www-form-urlencoded',
           'yukaka':'25'
        }    
    }).then(
        (text)=>{console.log("响应成功，调用第一个函数");return 1},//成功调用这个函数       
    ).then(
        (text)=>{console.log(text)},//成功调用这个函数，这里的参数是上一个then返回的值
        (request)=>{console.log('error')} //失败调用这个函数     
    ) 
})

关于then，第一个函数表示的是异步操作成功时调用的函数，第二个函数表示的是失败时调用的函数。同时then接受多个函数的调用，方法就是链式操作。需要注意的是成功调用这个函数，它的参数是上一个then返回的值。

function xxx(){
    return new Promise((f1, f2) => {
        doSomething()
        setTimeout(()=>{
            // 成功就调用 f1，失败就调用 f2
        },3000)
    })
}
xxx().then(success, fail)
xxx().then(success, fail).then(success, fail)  // 链式操作