AJAX 之 Promise

AJAX 的所有功能

AJAX 出现之后解决了前后端交互问题，前端也正式走向前台。
AJAX 最核心的8句话

1. let request = new XMLHttpRequest()
2. request.onreadystatechange = () => {
3.     if(request.state === 4){
       console.log(request.status)      //获取状态码
       console.log(request.statusText)      //获取状态码后面的OK
4.     if(request.status === 200){      
            console.log(request.getResponseHeader('Content-Type'))      //获取响应中第二部分某个内容
            console.log(request.getAllResponseHeaders)      //获取响应中第二部分所有的内容
            console.log(request.responseText)       //获取响应中第四部分
5.          let string = request.responseText
6.        let object = window.JSON.parse(string)
            }
        }
    }
7. request.open('get','http://baidu.com:8000/xxx')      //设置请求中第一部分和第二部分的HOST
   request.setRequestHeader('Content-Type','application-www-form-urlencoded')   //设置请求中第二部分
8. request.send('我偏要设置'')       //设置请求中第四部分

HTTP 请求四部分

第一部分：GET /xxx HTTP/1.1            //通过request.open()设置
第二部分：HOST : http://budu.com:8000    //通过request.setRequestHeader()设置，放在request.open()和request.send()之间
        Content-Type : application/x-www-url-encoded
第三部分：回车，不需要设置
第四部分：我偏要设置      //通过reuqest.send()设置，GET请浏览器默认不展示，POST情况可以

HTTP 响应四部分

第一部分：HTTP/1.1 200 OK        //通过 request.status / reques.statusText 获取
第二部分：Content-Type : text/json;charset=utf-8         //通过 request.getResponseHeader / request.getAllResponseHeaders 获取
第三部分：回车，不需要设置
第四部分：文本     //通过 request.responseText 获取

用一张图简单的画下前后端交互的过程

image

浏览器是在下载完所有响应内容后才知道响应结果吗？

服务器在发送响应时，假设response中内容很大很大，那要等到所有内容都下载完才知道响应结果吗？未免体验太差了吧，所以response中第一部分内容就已经把响应结果传递给浏览器。而我们做判断时，为什么先判断state === 4，再判断响应结果呢？如果内容都还没有下载完毕，你获取到了响应结果也没有用，又不能获取里面的内容，所以才等都下载完了之后在去判断

image

用jQuery封装下AJAX

window.jQuery.ajax = function({url,method,body,successFn,failFn}){
    let xhr = new XMLHttpRequest()
    xhr.onreadtstatechange = function(){
        if(xhr.readystate === 4 ){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                successFn.call(undefined,xhr.responseText)
            }else if(request.status >=400){
                failFn.call(uncefined,xhr)
            }
        }
    }
    request.open(method,url)
    request.send(body)
}

当再点击按钮时，直接调用封装好的 API

myButton.addEventLinstener('click',funtion(){
    window.jQuery.ajax({
        url : '/xxx',
        method : 'post',
        headers : {
            'Content-Type' : 'application / x-www- form-urlencoded,
            'zhangsan' : '19'
        },
        body : 'a&b',
        successFn : (responseText) => {},
        failFn : (request) => {}
    })
})

点击按钮时，调用 jQuery.ajax 时传递的函数是回调函数，它定义自己没有用，而是让别人用，别人用调用时会传递一个参数，所以回调函数的参数是确定的。

现在成功之后是可以把函数打印出来的，那如果成功后要打印两个函数怎么办。如下

function f1(responseText){}
function f2(responseText){}

successFn : (responseText) => {
    f1.call(undefined,responseText)
    f2.call(undefined,responseText)
}

Promise

用回调最大的问题是回调函数没有命名规范，每个开发者都有自己的风格，一旦引用了多个库，各个库之间的 ajax 回调函数可能会互相影响，Promise 的出现正好解决了这个问题。

function success(responseText){
    console.log(1)
}
function fail(request){
    console.log(2)
}
myButton.addEventListener('click',(e) => {
    $.ajax({
        url : '/xxx'
        method : 'post'
    }).then(success,fail)
})

$.ajax，调用ajax函数，它会返回一个Promise，如果成功了会调用success函数，如果失败了会调用fail函数。

虽然还是要传递函数，但是可以不用写函数名

myButton.addEventListener('click',(e) => {
    $.ajax({
        url : '/xxx'
        method : 'post'
    }).then(
        (responseText) => {console.log(responseText)},
        (request) => {console.log('error')}
    )
})

第一个成功函数的return的值会串到第二个成功函数上

myButton.addEventListener('click',(e) => {
    $.ajax({
        url : '/xxx'
        method : 'post'
    }).then(
        (responseText) => {
            console.log(responseText);
            return responseText
        },
        (request) => {
            console.log('error');
            return '已经处理'
        }
    ).then(
        (responseText) => {console.log(responseText)},  //responseText 应该是上一次处理的结果，jQuery会把它变成Object
        (request) => {console.log('error')}
})

因为jQuery发现返回值的Content-Type是text/json，它就会自动把它由 String 变成 Object。

window.jQuery.ajax = function(url,method,body,headers){
    return new Promise(function(resolve,reject){    //如果成功了就调用resolve，失败了调用reject
        let xhr = new XMLHttpRequest()
        for(let key in headers){
            let value = headers[key]
            xhr.setRequestHeader(key,value)
        }
        xhr.onreadtstatechange = function(){
            if(xhr.readystate === 4 ){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    resolve.call(undefined,xhr)
                }else if(request.status >=400){
                    reject.call(uncefined,xhr)
                }
            }
        }
        xhr.open(method,url)
        request.send(body)
    }   
})

AJAX 要必须要return new Promise，然后把你要做的事情放在new Promise里面成功就调用resolve，失败就调用reject，Promise会提供一个then的 API，then接收两个函数，成功就会调用第一个函数，失败调用第二个函数。

回调函数

什么是回调？

简单说，就是将函数 A 作为参数传入函数 B

function A(){}
function B(fn){fn.call()}
B(A)    // A 就是回调函数

具体的内容可以看这篇文章：异步与回调