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 獲取

用一張圖簡單的畫下先後端交互的過程

瀏覽器是在下載完全部響應內容後才知道響應結果嗎？

服務器在發送響應時，假設response中內容很大很大，那要等到全部內容都下載完才知道響應結果嗎？未免體驗太差了吧，因此response中第一部份內容就已經把響應結果傳遞給瀏覽器。而咱們作判斷時，爲何先判斷state === 4，再判斷響應結果呢？若是內容都尚未下載完畢，你獲取到了響應結果也沒有用，又不能獲取裏面的內容，因此纔等都下載完了以後在去判斷

用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 就是回調函數

具體的內容能夠看這篇文章：異步與回調