什么是異步操作勉耀？

Ajax

異步JavaScript與XML(AJAX)是一個(gè)專(zhuān)用術(shù)語(yǔ)指煎，用于實(shí)現(xiàn)在客戶(hù)端腳本與服務(wù)器之間的數(shù)據(jù)交互過(guò)程蹋偏。這一技術(shù)的優(yōu)點(diǎn)在于，它向開(kāi)發(fā)者提供了一種從Web服務(wù)器檢索數(shù)據(jù)而不必把用戶(hù)當(dāng)前正在觀察的頁(yè)面回饋給服務(wù)器至壤。與現(xiàn)代瀏覽器的通過(guò)存取瀏覽器DOM結(jié)構(gòu)的編程代碼 (JavaScript) 動(dòng)態(tài)地改變被顯示內(nèi)容的支持相配合威始，AJAX讓開(kāi)發(fā)者在瀏覽器端更新被顯示的HTML內(nèi)容而不必刷新頁(yè)面。換句話(huà)說(shuō)像街，AJAX可以不用刷新整個(gè)頁(yè)面就更新網(wǎng)頁(yè)內(nèi)容黎棠，使基于瀏覽器的應(yīng)用程序更具交互性而且更類(lèi)似傳統(tǒng)型桌面應(yīng)用程序。
XMLHttpRequest工作原理

從這個(gè)描述里面镰绎，我們可以看出來(lái)脓斩，Ajax包含的內(nèi)容應(yīng)該有

• 能夠跟服務(wù)端發(fā)起網(wǎng)絡(luò)請(qǐng)求（一般是http，但是也可以是ftp或者其他協(xié)議的請(qǐng)求）畴栖，處理服務(wù)端的網(wǎng)絡(luò)響應(yīng)
• 能夠根據(jù)服務(wù)端返回的數(shù)據(jù)随静，調(diào)用JS來(lái)修改DOM結(jié)構(gòu)和渲染CSS樣式
• 能夠跟js事件循環(huán)交互處理異步的響應(yīng)和回調(diào)

而Ajax實(shí)現(xiàn)核心功能其實(shí)就是通過(guò)XMLHttpRequest。

XMLHttpRequest（XHR）

XHR在發(fā)起請(qǐng)求時(shí)驶臊，運(yùn)行機(jī)制如圖所示：

XMLHttpRequest.png

在XMLHttpRequest發(fā)起請(qǐng)求之后挪挤，渲染進(jìn)程會(huì)將請(qǐng)求發(fā)送給網(wǎng)絡(luò)進(jìn)程，然后網(wǎng)絡(luò)進(jìn)程負(fù)責(zé)資源的下載关翎，等網(wǎng)絡(luò)進(jìn)程接收到數(shù)據(jù)之后扛门，就會(huì)利用 IPC 來(lái)通知渲染進(jìn)程；渲染進(jìn)程接收到消息之后纵寝，會(huì)將 xhr 的回調(diào)函數(shù)封裝成任務(wù)并添加到消息隊(duì)列中论寨，等主線(xiàn)程循環(huán)系統(tǒng)執(zhí)行到該任務(wù)的時(shí)候，就會(huì)根據(jù)相關(guān)的狀態(tài)來(lái)調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)

xmlhttprequest-運(yùn)作機(jī)制
ajax底層實(shí)現(xiàn)

XMLHttpRequest關(guān)鍵方法和參數(shù)

• XMLHttpRequest.open：表示開(kāi)啟一個(gè)請(qǐng)求
• XMLHttpRequest.send：表示發(fā)送一個(gè)請(qǐng)求
• XMLHttpRequest.readyState：表示當(dāng)前所處的狀態(tài)

• XMLHttpRequest.onreadystatechange：請(qǐng)求狀態(tài)變化時(shí)的回調(diào)，用戶(hù)定義的回調(diào)函數(shù)在此調(diào)用

此處只列出了關(guān)鍵參數(shù)南蹂，XMLHttpRequest詳細(xì)的從參數(shù)和方法可以參考MDN
XMLHttpRequest/readyState

JS實(shí)現(xiàn)Ajax

• 實(shí)現(xiàn)思路（以發(fā)起HTTP請(qǐng)求為例）
  1.ajax接收json格式的參數(shù)option犬金，json里面的參數(shù)用于配置發(fā)起網(wǎng)絡(luò)請(qǐng)求的具體參數(shù)
  2.參數(shù)option與HTTP請(qǐng)求相關(guān)配置參數(shù)處理，如果傳入option里面有些必填的參數(shù)沒(méi)有（比如：請(qǐng)求類(lèi)型(get還是post)，datatype等）晚顷，那么ajax中可以設(shè)置默認(rèn)值峰伙，或者判斷之后拋出異常。
  3.參數(shù)option的數(shù)據(jù)具體參數(shù)data json的格式處理
  4.創(chuàng)建XMLHttpRequest實(shí)例對(duì)象音同，考慮兼容性（可選）词爬，因?yàn)樵贗E6以下版本是ActiveXobject
  5.XMLHttpRequest.open(method, url, async, user, password);初始化請(qǐng)求，根據(jù)請(qǐng)求的類(lèi)型是get還是post权均，確定open的從參數(shù)是如何傳輸?shù)?br> 6.XMLHttpRequest.send()發(fā)送請(qǐng)求顿膨，如果是POST，參數(shù)data數(shù)據(jù)是由send發(fā)送的叽赊，但是send不支持json格式參數(shù)恋沃，所以要對(duì)data數(shù)據(jù)進(jìn)行編碼
  7.當(dāng)readyState狀態(tài)變化，設(shè)置XMLHttpRequest.onreadystatechange()回調(diào)必指，如果返回的HTTP請(qǐng)求狀態(tài)碼是請(qǐng)求成功相關(guān)的狀態(tài)碼囊咏，執(zhí)行，success的回調(diào)塔橡，否則執(zhí)行error的回調(diào)
  8.請(qǐng)求超時(shí)未完成梅割，XMLHttpRequest.abort()自動(dòng)中斷

<script>
    function ajax(options){
        options = options ||{};  //調(diào)用函數(shù)時(shí)如果options沒(méi)有指定，就給它賦值{},一個(gè)空的Object
        options.type=(options.type || "GET").toUpperCase();/// 請(qǐng)求格式GET葛家、POST户辞，默認(rèn)為GET
        options.dataType=options.dataType || "json";    //響應(yīng)數(shù)據(jù)格式，默認(rèn)json
       options.timeout=options.timeout|| 5000;    //響應(yīng)數(shù)據(jù)格式癞谒，默認(rèn)json
        var params=formatParams(options.data);//options.data請(qǐng)求的數(shù)據(jù)

        var xhr;

        //考慮兼容性
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else if(window.ActiveObject){//兼容IE6以下版本
            xhr=new ActiveXobject('Microsoft.XMLHTTP');
        }

        //啟動(dòng)并發(fā)送一個(gè)請(qǐng)求
        if(options.type=="GET"){
            xhr.open("GET",options.url+"?"+params,true);
            xhr.send(null);
        }else if(options.type=="POST"){
            xhr.open("post",options.url,true);

            //設(shè)置表單提交時(shí)的內(nèi)容類(lèi)型
            //Content-type數(shù)據(jù)請(qǐng)求的格式
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(params);
        }

    //    設(shè)置有效時(shí)間
        setTimeout(function(){
            if(xhr.readySate!=4){
                xhr.abort();
            }
        },options.timeout)

    //    接收
    //     options.success成功之后的回調(diào)函數(shù)  options.error失敗后的回調(diào)函數(shù)
    //xhr.responseText,xhr.responseXML  獲得字符串形式的響應(yīng)數(shù)據(jù)或者XML形式的響應(yīng)數(shù)據(jù)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var status=xhr.status;
                if(status>=200&& status<300 || status==304){
                  options.success&&options.success(xhr.responseText,xhr.responseXML);
                }else{
                    options.error&&options.error(status);
                }
            }
        }
    }

    //格式化請(qǐng)求參數(shù)
    function formatParams(data){
        var arr=[];
        for(var name in data){
            arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
        }
        arr.push(("v="+Math.random()).replace(".",""));
        return arr.join("&");

    }
    //基本的使用實(shí)例
    ajax({
        url:"http://server-name/login",
        type:'post',
        data:{
            username:'username',
            password:'password'
        },
        dataType:'json',
        timeout:10000,
        contentType:"application/json",
        success:function(data){
　　　　　　底燎。。弹砚。双仍。。桌吃。//服務(wù)器返回響應(yīng)朱沃，根據(jù)響應(yīng)結(jié)果，分析是否登錄成功
        },
        //異常處理
        error:function(e){
            console.log(e);
        }
    })
</script>

js原生實(shí)現(xiàn)ajax

Promise

MDN中對(duì)于Promise 的定義是：表示一個(gè)異步操作最終完成 (或失敗), 及其結(jié)果值.

了解過(guò)JS事件循環(huán)的機(jī)制的話(huà)茅诱，我們會(huì)發(fā)現(xiàn)为流，JS當(dāng)中認(rèn)為異步操作，在開(kāi)始執(zhí)行到獲取最后結(jié)果之間让簿，是允許其被掛起等待（無(wú)論它真實(shí)的執(zhí)行事件多快），也就是說(shuō)異步任務(wù)的代碼執(zhí)行了之后秀睛，可以先把這個(gè)任務(wù)的具體執(zhí)行結(jié)果放一邊尔当，先執(zhí)行其他同步代碼，再來(lái)執(zhí)行異步任務(wù)的回調(diào)。而且操作的結(jié)果可能是成功的也可能是失敗的椭迎。因此在Promise內(nèi)部有一個(gè)屬性[[PromiseState]]锐帜，保存了三種狀態(tài)，表示異步行為的整個(gè)過(guò)程畜号。

• Pending：表示異步操作還沒(méi)有結(jié)束
• fulfilled：表示異步操作執(zhí)行成功了
• rejected：表示異步操作被拒絕了

對(duì)于fulfilled和rejected狀態(tài)來(lái)說(shuō)缴阎，代表的都是promise已經(jīng)結(jié)束了，所以這兩個(gè)狀態(tài)又統(tǒng)稱(chēng)為settle狀態(tài)简软。
我們可以根據(jù)這三個(gè)狀態(tài)的轉(zhuǎn)換蛮拔，來(lái)理解整個(gè)Promise的運(yùn)行過(guò)程。

以promise替代ajax為例痹升，我們會(huì)看到形如這樣的代碼：

const promise1 = new Promise(function(resolve,reject){
    ajax(
        {
            url:'http://testUrl',
            success:function(data){
    　　　　　　resolve(data);
            },
            error:function(e){
                reject(e);
            }
        }
    )
});
promise1.then(function(data){
    //get data from resolve
},
function(e){
    //get e from reject 
});

從Promise的使用的代碼中建炫，我們可以把它大致分成三個(gè)部分：

• Promise(function(resolve,[reject]))構(gòu)造函數(shù)
• Promise.prototype.then
• onfulfilled和onReject回調(diào)

根據(jù)ecma的規(guī)范，我們可以看看每一個(gè)步驟中大概都發(fā)生了什么疼蛾。

Promise(excutor)構(gòu)造函數(shù)

• excutor必須是個(gè)函數(shù)對(duì)象肛跌，含有兩個(gè)函數(shù)參數(shù)resolve和reject，用來(lái)表示異步操作成功或者失敗的情況下察郁，執(zhí)行的操作衍慎。
  當(dāng)這個(gè)構(gòu)造函數(shù)調(diào)用的時(shí)候，有幾個(gè)關(guān)鍵的步驟：
• 創(chuàng)建一個(gè)Promise實(shí)例p
• 把p的[[PromiseState]]狀態(tài)設(shè)為pending
• Promise resolve方法執(zhí)行后皮钠，會(huì)把[[PromiseState]]狀態(tài)設(shè)為fulfilled
  ecma262/#sec-promise-resolve-functions
• 同理如果執(zhí)行的是Promise reject方法稳捆，會(huì)把[[PromiseState]]狀態(tài)設(shè)為reject
• 執(zhí)行Promise reject還是resolve會(huì)決定，then之后是執(zhí)行fulfilled回調(diào)還是reject回調(diào)鳞芙。
• 最后返回這個(gè)Promise實(shí)例p
  ecma262/#sec-promise-executor

我們可以看出眷柔，Promise的狀態(tài)是在excutor當(dāng)中就完成pending到settle的過(guò)程。

Promise.prototype.then

• 首先原朝，then中的this對(duì)象是當(dāng)前調(diào)用它的promise實(shí)例
• 會(huì)根據(jù)這個(gè)實(shí)例的具體狀態(tài)（是fulfilled還是reject）來(lái)判斷驯嘱，將fulfilled回調(diào)還是reject回調(diào)任務(wù)加到微任務(wù)隊(duì)列當(dāng)中，等待事件隊(duì)列中的任務(wù)執(zhí)行完才執(zhí)行喳坠。
• 最后then返回一個(gè)新promise或者undefined

ecma262/#sec-performpromisethen

Promise.resolve(value)和Promise.reject(reason)可以理解為對(duì)excutor的封裝

• Promise.resolve(value)

返回一個(gè)狀態(tài)由給定value決定的Promise對(duì)象鞠评。如果該值是thenable(即，帶有then方法的對(duì)象)壕鹉，返回的Promise對(duì)象的最終狀態(tài)由then方法執(zhí)行決定剃幌；否則的話(huà)(該value為空，基本類(lèi)型或者不帶then方法的對(duì)象),返回的Promise對(duì)象狀態(tài)為fulfilled晾浴，并且將該value傳遞給對(duì)應(yīng)的then方法负乡。通常而言，如果你不知道一個(gè)值是否是Promise對(duì)象脊凰，使用Promise.resolve(value) 來(lái)返回一個(gè)Promise對(duì)象,這樣就能將該value以Promise對(duì)象形式使用抖棘。

在MDN中看到一個(gè)例子：

var original = Promise.resolve(33);
var cast = Promise.resolve(original);
cast.then(function(value) {
  console.log('value: ' + value);
});
console.log('original === cast ? ' + (original === cast));

/*
*  打印順序如下，這里有一個(gè)同步異步先后執(zhí)行的區(qū)別
*  original === cast ? true
*  value: 33
*/

稍微有點(diǎn)疑惑為什么original和cast兩個(gè)對(duì)象能夠絕對(duì)相等？
查看了一下PromiseResolve源碼規(guī)范

PromiseResolve.png

var original = Promise.resolve(33);
var cast = Promise.resolve(33);
console.log('original === cast ? ' + (original === cast));//輸出false

• Promise.reject(reason)

返回一個(gè)狀態(tài)為失敗的Promise對(duì)象何陆，并將給定的失敗信息傳遞給對(duì)應(yīng)的處理方法

• promise.all(iterable)
  用于處理多個(gè)promise事件晨汹，傳入一個(gè)promise數(shù)組，最終會(huì)返回一個(gè)新的promise贷盲，resolve value返回?cái)?shù)據(jù)數(shù)組淘这，順序跟promise數(shù)組里面的順序一樣，如果是reject狀態(tài)巩剖，那么返回第一個(gè)報(bào)錯(cuò)的error信息铝穷。所以如果不報(bào)錯(cuò)，all會(huì)等所有promise執(zhí)行完畢再返回結(jié)果

• promise.race(iterable)
  race在英文中表示競(jìng)賽的意思佳魔，所以我們可以理解為promise.race(iterable)就是傳入的promise數(shù)組曙聂，會(huì)按照?qǐng)?zhí)行速度的快慢來(lái)返回結(jié)果（無(wú)論是resolve還是有異常發(fā)生）。
  MDN-Promise/race

Promise鏈?zhǔn)秸{(diào)用

因?yàn)镻romise構(gòu)造函數(shù)和then鞠鲜、catch最終都是返回一個(gè)新的Promise對(duì)象宁脊，所以Promise可以用鏈?zhǔn)秸{(diào)用來(lái)解決回調(diào)地獄的問(wèn)題。

new Promise((resolve, reject) => {
    console.log('初始化');

    resolve();
})
.then(() => {
    throw new Error('有哪里不對(duì)了');
        
    console.log('執(zhí)行「這個(gè)」”');
})
.catch(() => {
    console.log('執(zhí)行「那個(gè)」');
})
.then(() => {
    console.log('執(zhí)行「這個(gè)」贤姆，無(wú)論前面發(fā)生了什么');
});
//輸出結(jié)果
初始化
執(zhí)行“那個(gè)”
執(zhí)行“這個(gè)”榆苞，無(wú)論前面發(fā)生了什么

MDN Promise
令人費(fèi)解的 async/await 執(zhí)行順序