資訊專欄INFORMATION COLUMN
摘要：說(shuō)明處理方法被異步執(zhí)行了。意味著操作成功完成。狀態(tài)的對(duì)象可能觸發(fā)狀態(tài)并傳遞一個(gè)值給相應(yīng)的狀態(tài)處理方法，也可能觸發(fā)失敗狀態(tài)并傳遞失敗信息。注生命周期相關(guān)內(nèi)容引用自四使用和異步加載圖片這是官方給出的示例，部分的代碼如下
帶你玩轉(zhuǎn) JavaScript ES6 (七) - 異步
本文同步帶你玩轉(zhuǎn) JavaScript ES6 (七) - 異步，轉(zhuǎn)載請(qǐng)注明出處。
本章我們將學(xué)習(xí) ES6 中的 Promise(異步) 相關(guān)知識(shí)，了解如何使用 Promise 對(duì)象創(chuàng)建異步程序
一、介紹Promise 對(duì)象通過(guò) new Promise(executor) 實(shí)例化創(chuàng)建，可以讓程序進(jìn)入一個(gè)異步的執(zhí)行中，完成耗時(shí)的操作處理。
二、語(yǔ)法 2.1 實(shí)例化語(yǔ)法：new Promise((resole, reject) => {})
Promise 類接收帶有兩個(gè)匿名函數(shù)作為參數(shù)的匿名函數(shù)，其中 resolve 表示成功處理函數(shù)，reject 表示失敗處理函數(shù)
let promise = new Promise((resole, reject) => {
console.log("main")
setTimeout(() => {
resole("run async")
}, 1500)
})
2.2 異步成功執(zhí)行處理方法
通過(guò) Promise 對(duì)象的 then 方法綁定 resolve處理方法，可以通過(guò)鏈?zhǔn)讲僮鹘壎ǘ鄠€(gè)用于 resolve 的處理方法
let promise = new Promise((resole, reject) => {
console.log("main")
setTimeout(() => {
resole("run async")
}, 1500)
})
promise.then((msg) => {
console.log(msg);
})
上面示例會(huì)先打印輸出 mian，之后過(guò) 1.5 s 會(huì)打印輸出 run async 到控制臺(tái)。為了演示異步執(zhí)行，現(xiàn)在對(duì)上例稍作調(diào)整：
let promise = new Promise((resole, reject) => {
resole("run async")
console.log("main")
})
promise.then((msg) => {
console.log(msg);
})
我們首先將 resolve("run async") 調(diào)用移至 console.log("main") 之前。
如果是同步調(diào)用按照?qǐng)?zhí)行順序，會(huì)先輸出 run async 再輸出 main，但情況相反。說(shuō)明 resolve 處理方法被異步執(zhí)行了。
2.3 異步失敗執(zhí)行處理方法通過(guò)使用 Promise 對(duì)象的 catch 方法綁定 reject 處理方法。
let promise = new Promise((resole, reject) => {
//resole("run async")
reject("run async error")
console.log("main")
})
promise.then((msg) => {
throw new Error("error")
console.log(msg);
}).catch(() => {
console.log("error")
})
三、 Promise 生命周期
一個(gè) Promise有以下幾種狀態(tài):
pending: 初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。
pending 狀態(tài)的 Promise 對(duì)象可能觸發(fā)fulfilled 狀態(tài)并傳遞一個(gè)值給相應(yīng)的狀態(tài)處理方法，也可能觸發(fā)失敗狀態(tài)（rejected）并傳遞失敗信息。
當(dāng)其中任一種情況出現(xiàn)時(shí)，Promise 對(duì)象的 then 方法綁定的處理方法（handlers ）就會(huì)被調(diào)用（then方法包含兩個(gè)參數(shù)：onfulfilled 和 onrejected，它們都是 Function 類型。當(dāng)Promise狀態(tài)為fulfilled時(shí)，調(diào)用 then 的 onfulfilled 方法，當(dāng)Promise狀態(tài)為rejected時(shí)，調(diào)用 then 的 onrejected 方法， 所以在異步操作的完成和綁定處理方法之間不存在競(jìng)爭(zhēng)）。
注: Promise 生命周期相關(guān)內(nèi)容引用自 Promise
四、使用 Promise 和 XHR 異步加載圖片這是 MDN 官方給出的示例，JavaScript 部分的代碼如下
function imgLoad(url) {
// Create new promise with the Promise() constructor;
// This has as its argument a function
// with two parameters, resolve and reject
return new Promise(function(resolve, reject) {
// Standard XHR to load an image
var request = new XMLHttpRequest();
request.open("GET", url);
request.responseType = "blob";
// When the request loads, check whether it was successful
request.onload = function() {
if (request.status === 200) {
// If successful, resolve the promise by passing back the request response
resolve(request.response);
} else {
// If it fails, reject the promise with a error message
reject(Error("Image didn"t load successfully; error code:" + request.statusText));
}
};
request.onerror = function() {
// Also deal with the case when the entire request fails to begin with
// This is probably a network error, so reject the promise with an appropriate message
reject(Error("There was a network error."));
};
// Send the request
request.send();
});
}
// Get a reference to the body element, and create a new image object
var body = document.querySelector("body");
var myImage = new Image();
// Call the function with the URL we want to load, but then chain the
// promise then() method on to the end of it. This contains two callbacks
imgLoad("myLittleVader.jpg").then(function(response) {
// The first runs when the promise resolves, with the request.response
// specified within the resolve() method.
var imageURL = window.URL.createObjectURL(response);
myImage.src = imageURL;
body.appendChild(myImage);
// The second runs when the promise
// is rejected, and logs the Error specified with the reject() method.
}, function(Error) {
console.log(Error);
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107271.html
摘要：初始化申明一個(gè)設(shè)置和獲取值使用設(shè)置新值或更新值申明設(shè)置值張三豐張三豐重復(fù)設(shè)置值如果鍵值存在則新值替換舊值張三豐使用獲取值，如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內(nèi)。 本文同步帶你入門 帶你玩轉(zhuǎn) JavaScript ES6 (六) - Map 映射，轉(zhuǎn)載請(qǐng)注明出處。 本章我們講學(xué)習(xí) ES6 中的 Map(映射)。上一章節(jié)我們學(xué)習(xí)了 [Set(集合)]()的相關(guān)...
摘要：透視即是以現(xiàn)實(shí)的視角來(lái)看屏幕上的事物，從而展現(xiàn)的效果。旋轉(zhuǎn)則不再是平面上的旋轉(zhuǎn)，而是三維坐標(biāo)系的旋轉(zhuǎn)，就包括軸，軸，軸旋轉(zhuǎn)。必須與屬性一同使用，而且只影響轉(zhuǎn)換元素。可自由轉(zhuǎn)載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說(shuō)，先上demo 酷炫css3走馬燈/正方體動(dòng)畫： https://bupt-...
摘要：透視即是以現(xiàn)實(shí)的視角來(lái)看屏幕上的事物，從而展現(xiàn)的效果。旋轉(zhuǎn)則不再是平面上的旋轉(zhuǎn)，而是三維坐標(biāo)系的旋轉(zhuǎn)，就包括軸，軸，軸旋轉(zhuǎn)。必須與屬性一同使用，而且只影響轉(zhuǎn)換元素?？勺杂赊D(zhuǎn)載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說(shuō)，先上demo 酷炫css3走馬燈/正方體動(dòng)畫： https://bupt-...
摘要：選擇選項(xiàng)，可以添加名稱和描述的數(shù)據(jù)，以便其他用戶了解你的相關(guān)信息，如圖創(chuàng)建一個(gè)新集合。如果用戶正在處理一些特定的集合，可以單擊圖標(biāo)將集合置頂，如圖過(guò)濾集合。 集合...
摘要：阿里云是國(guó)內(nèi)云服務(wù)器市場(chǎng)的龍頭，性價(jià)比高，速度快又安全，是站長(zhǎng)建站首選的云服務(wù)器之一。作為一個(gè)老司機(jī)，福利吧也和大家分享一下我的阿里云推廣經(jīng)驗(yàn)，教大家如何免費(fèi)推廣云大使。阿里云是國(guó)內(nèi)云服務(wù)器市場(chǎng)的龍頭，性價(jià)比高，速度快又安全，是站長(zhǎng)建站首選的云服務(wù)器之一。福利吧使用的也是阿里云服務(wù)器，是折騰了很多次網(wǎng)站搬家后，才選擇了阿里云。身邊好幾個(gè)站長(zhǎng)最后都殊途同歸，用了阿里云，可見(jiàn)阿里云服務(wù)器性能確實(shí)...
閱讀 4065·2021-11-16 11:50
閱讀 1008·2021-11-11 16:55
閱讀 3744·2021-10-26 09:51
閱讀 934·2021-09-22 15:03
閱讀 3569·2019-08-30 15:54
閱讀 3363·2019-08-30 15:54
閱讀 2549·2019-08-30 14:04
閱讀 980·2019-08-30 13:53
