利用Promise自定義一個GET請求的函數(shù)示例代碼
寫在最前面
近期 review 自己以前的代碼的時候,看到 promise 的使用方法,用的比較模糊。含義不清,用法凌亂,這里重新溫習一下基礎知識。
前言
JavaScript 是單線程工作,但是瀏覽器是多線程的。為了更好的完成我們程序的任務。Promise 異步的操作就由此誕生了。
一個 Promise 就是一個代表了異步操作最終完成或者失敗的結果對象。
怎么使用?
語法
基本
new Promise( function(resolve, reject) {...} /* executor */ );
Promise 構造函數(shù)包含一個參數(shù)和一個帶有 resolve(解析)和 reject(拒絕)兩個參數(shù)的回調(diào)。 在回調(diào)中執(zhí)行一些操作(例如異步),如果一切都正常,則調(diào)用 resolve,否則調(diào)用 reject。
then 的使用
promise.then(function(result) { console.log(result); // "Stuff worked!" }, function(err) { console.log(err); // Error:"It broke" });
then() 包含兩個參數(shù):一個用于成功情形的回調(diào)和一個用于失敗情形的回調(diào)。 這兩個皆可選,因此您可以只添加一個用于成功情形或失敗情形的回調(diào)。
主要的 promise 的三個方法
Promise.all
- 這個方法返回一個新的promise對象,該promise對象在iterable參數(shù)對象里所有的promise對象都成功的時候才會觸發(fā)成功,一旦有任何一個iterable里面的promise對象失敗則立即觸發(fā)該promise對象的失敗。這個新的promise對象在觸發(fā)成功狀態(tài)以后,會把一個包含iterable里所有promise返回值的數(shù)組作為成功回調(diào)的返回值,順序跟iterable的順序保持一致;如果這個新的promise對象觸發(fā)了失敗狀態(tài),它會把iterable里第一個觸發(fā)失敗的promise對象的錯誤信息作為它的失敗錯誤信息。Promise.all方法常被用于處理多個promise對象的狀態(tài)集合。
Promise.reject
- 返回一個狀態(tài)為失敗的Promise對象,并將給定的失敗信息傳遞給對應的處理方法。
return Promise.reject(error);
Promise.resolve
- 返回一個狀態(tài)由給定value決定的Promise對象。如果該值是thenable(即,帶有then方法的對象),返回的Promise對象的最終狀態(tài)由then方法執(zhí)行決定;否則的話(該value為空,基本類型或者不帶then方法的對象),返回的Promise對象狀態(tài)為fulfilled,并且將該value傳遞給對應的then方法。通常而言,如果你不知道一個值是否是Promise對象,使用Promise.resolve(value) 來返回一個Promise對象,這樣就能將該value以Promise對象形式使用。
怎么創(chuàng)建一個 Promise
Promise 對象是由關鍵字 new 及其構造函數(shù)來創(chuàng)建的。
const myFirstPromise = new Promise((resolve, reject) => { // ?做一些異步操作,最終會調(diào)用下面兩者之一: // // resolve(someValue); // fulfilled // ?或 // reject("failure reason"); // rejected });
想讓某個函數(shù)擁有 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 -- 創(chuàng)建一個 GET 請求的簡單函數(shù)
function get(url) { // 返回一個 promise 對象. return new Promise(function(resolve, reject) { // 創(chuàng)建一個 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)); } }; // 處理網(wǎng)絡錯誤信息 req.onerror = function() { reject(Error("Network Error")); }; // 發(fā)送請求 req.send(); }); }
現(xiàn)在我們來使用吧
get('story.json').then(function(response) { console.log("Success!", response); }, function(error) { console.error("Failed!", error); })
Demo: 2 -- 創(chuàng)建一個圖片上傳的 Promise 函數(shù)
function imgLoad(url) { //創(chuàng)建一個圖片上傳的 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); });
下篇文章預告
大概內(nèi)容:promise 和錯誤處理詳解,JavaScript 異步和 promise
參考
總結
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。
相關文章
JavaScript中setInterval()用法舉例詳解
這篇文章主要給大家介紹了關于JavaScript中setInterval()用法的相關資料,setInterval()方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-10-10