利用Promise自定義一個GET請求的函數(shù)示例代碼
寫在最前面
近期 review 自己以前的代碼的時候，看到 promise 的使用方法，用的比較模糊。含義不清，用法凌亂，這里重新溫習一下基礎知識。
前言
JavaScript 是單線程工作，但是瀏覽器是多線程的。為了更好的完成我們程序的任務。Promise 異步的操作就由此誕生了。
一個 Promise 就是一個代表了異步操作最終完成或者失敗的結果對象。
怎么使用？
語法
基本
new Promise( function(resolve, reject) {...} /* executor */ );
Promise 構造函數(shù)包含一個參數(shù)和一個帶有 resolve（解析）和 reject（拒絕）兩個參數(shù)的回調。 在回調中執(zhí)行一些操作（例如異步），如果一切都正常，則調用 resolve，否則調用 reject。
then 的使用
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error:"It broke"
});
then() 包含兩個參數(shù)：一個用于成功情形的回調和一個用于失敗情形的回調。 這兩個皆可選，因此您可以只添加一個用于成功情形或失敗情形的回調。
主要的 promise 的三個方法
Promise.all
- 這個方法返回一個新的promise對象，該promise對象在iterable參數(shù)對象里所有的promise對象都成功的時候才會觸發(fā)成功，一旦有任何一個iterable里面的promise對象失敗則立即觸發(fā)該promise對象的失敗。這個新的promise對象在觸發(fā)成功狀態(tài)以后，會把一個包含iterable里所有promise返回值的數(shù)組作為成功回調的返回值，順序跟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) => {
// ?做一些異步操作，最終會調用下面兩者之一:
//
// 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));
}
};
// 處理網絡錯誤信息
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);
});
下篇文章預告
大概內容：promise 和錯誤處理詳解，JavaScript 異步和 promise
參考
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了JavaScript實現(xiàn)表格點擊排序的方法,可實現(xiàn)點擊頂部數(shù)據(jù)項標題實現(xiàn)對應數(shù)據(jù)列的排序效果,涉及javascript鼠標事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下2015-05-05
Web Storage為瀏覽器提供了方便的key value存儲，是一種比cookie更加方便簡潔的存儲方式。也是諸多客戶端存儲方式中非常常見的一種2021-06-06
這篇文章主要介紹了在JavaScript中運行.NET?Core代碼詳情，DotNetJS可以將C#項目編譯為與任何環(huán)境兼容的單文件JavaScript庫，變可以在JavaScript中運行.NET?Core代碼，相關操作分享詳情，需要的小伙伴可以參考一下2022-04-04
headjs其實是一整套的工具，本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下2016-11-11
在web頁面中，我們經常需要通過修改樣式（style）來達到更好的用戶體驗，需要的朋友可以參考下。2010-10-10
這篇文章主要介紹了JavaScript中的繼承方式詳解,本文講解了js繼承的概念、原型式繼承與類式繼承、原型鏈繼承、類式繼承、組合繼承、原型式繼承等內容,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了js異步編程技巧，使用計數(shù)器的方式，每完成一個請求計數(shù)器加1 當計數(shù)器等于2時執(zhí)行回調邏輯,兩個http并行發(fā)送,從而極大的提高了效率,需要的朋友可以參考下2017-08-08
js面向對象封裝級聯(lián)下拉菜單列表的實現(xiàn)步驟
這篇文章主要介紹了js面向對象封裝級聯(lián)下拉菜單列表的實現(xiàn)步驟，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了利用js實現(xiàn)簡易紅綠燈，幫助大家更好的利用js制作特效，美化網頁，感興趣的朋友可以了解下2020-10-10
原生javascript+css3編寫的3D魔方動畫旋扭特效
這篇文章主要介紹了原生javascript+css3編寫的3D魔方動畫旋扭特效的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03