寫在最前面
- 近期 review 自己以前的程式碼的時候，看到 promise 的使用方法，用的比較模糊。含義不清，用法凌亂，這裡重新溫習一下基礎知識。
- 下面是?新鮮出爐的下篇文章，結合 async 來讓 promise 更好貼合我們的場景使用。
- 結合 async 非同步函式 - 提高 Promise 的易用性
前言
- JavaScript 是單執行緒工作，但是瀏覽器是多執行緒的。為了更好的完成我們程式的任務。Promise 非同步的操作就由此誕生了。
- 一個
Promise就是一個代表了非同步操作最終完成或者失敗的結果物件。
怎麼使用？
語法
- 基本
new Promise( function(resolve, reject) {...} /* executor */ );
複製程式碼
Promise建構函式包含一個引數和一個帶有resolve（解析）和reject（拒絕）兩個引數的回撥。 在回撥中執行一些操作（例如非同步），如果一切都正常，則呼叫resolve，否則呼叫reject。
then的使用
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error:"It broke"
});
複製程式碼then() 包含兩個引數：一個用於成功情形的回撥和一個用於失敗情形的回撥。 這兩個皆可選，因此您可以只新增一個用於成功情形或失敗情形的回撥。
主要的 promise 的三個方法
Promise.all
- 這個方法返回一個新的promise物件，該promise物件在iterable引數物件裡所有的promise物件都成功的時候才會觸發成功，一旦有任何一個iterable裡面的promise物件失敗則立即觸發該promise物件的失敗。這個新的promise物件在觸發成功狀態以後，會把一個包含iterable裡所有promise返回值的陣列作為成功回撥的返回值，順序跟iterable的順序保持一致；如果這個新的promise物件觸發了失敗狀態，它會把iterable裡第一個觸發失敗的promise物件的錯誤資訊作為它的失敗錯誤資訊。Promise.all方法常被用於處理多個promise物件的狀態集合。
Promise.reject
- 返回一個狀態為失敗的Promise物件，並將給定的失敗資訊傳遞給對應的處理方法。
return Promise.reject(error);
Promise.resolve
- 返回一個狀態由給定value決定的Promise物件。如果該值是thenable(即，帶有then方法的物件)，返回的Promise物件的最終狀態由then方法執行決定；否則的話(該value為空，基本型別或者不帶then方法的物件),返回的Promise物件狀態為fulfilled，並且將該value傳遞給對應的then方法。通常而言，如果你不知道一個值是否是Promise物件，使用Promise.resolve(value) 來返回一個Promise物件,這樣就能將該value以Promise物件形式使用。
怎麼建立一個 Promise
- Promise 物件是由關鍵字 new 及其建構函式來建立的。
const myFirstPromise = new Promise((resolve, reject) => {
// ?做一些非同步操作，最終會呼叫下面兩者之一:
//
// resolve(someValue); // fulfilled
// ?或
// reject("failure reason"); // rejected
});
複製程式碼- 想讓某個函式擁有 Promise 功能？讓他放回一個 Promise 物件就可以了：
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
};
複製程式碼Demo: 1 -- 建立一個 GET 請求的簡單函式
function get(url) {
// 返回一個 promise 物件.
return new Promise(function(resolve, reject) {
// 建立一個 XML 物件
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
if (req.status == 200) {
// 請求 200的時候處理 response
resolve(req.response);
}
else {
// 處理請求錯誤資訊
reject(Error(req.statusText));
}
};
// 處理網路錯誤資訊
req.onerror = function() {
reject(Error("Network Error"));
};
// 傳送請求
req.send();
});
}
複製程式碼- 現在我們來使用吧
get('story.json').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
})
複製程式碼Demo: 2 -- 建立一個圖片上傳的 Promise 函式
function imgLoad(url) {
//建立一個圖片上傳的 Promise() constructor;
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'blob';
request.onload = function() {
if (request.status === 200) {
resolve(request.response);
} else {
reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
}
};
request.onerror = function() {
reject(Error('There was a network error.'));
};
request.send();
});
}
// 掛載到 body 上面去
var body = document.querySelector('body');
var myImage = new Image();
// 使用
imgLoad('myLittleVader.jpg').then(function(response) {
//第一步 處理 resolve() method.
var imageURL = window.URL.createObjectURL(response);
myImage.src = imageURL;
body.appendChild(myImage);
}, function(Error) {
// 處理錯誤
console.log(Error);
});
複製程式碼下篇文章
- 新鮮出爐的下篇文章寫好，結合 async 來讓 promise 更好貼合我們的場景使用。
- 結合 async 非同步函式 - 提高 Promise 的易用性