快捷導(dǎo)航

利用Promise自定義一個(gè)GET請(qǐng)求的函數(shù)示例代碼

更新時(shí)間：2019年03月20日 14:59:00 作者：Pandaaa

這篇文章主要給大家介紹了關(guān)于如何利用Promise自定義一個(gè)GET請(qǐng)求的函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Promise具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

寫在最前面

近期 review 自己以前的代碼的時(shí)候，看到 promise 的使用方法，用的比較模糊。含義不清，用法凌亂，這里重新溫習(xí)一下基礎(chǔ)知識(shí)。

前言

JavaScript 是單線程工作，但是瀏覽器是多線程的。為了更好的完成我們程序的任務(wù)。Promise 異步的操作就由此誕生了。

一個(gè) Promise 就是一個(gè)代表了異步操作最終完成或者失敗的結(jié)果對(duì)象。

怎么使用？

語(yǔ)法

基本

new Promise( function(resolve, reject) {...} /* executor */ );

Promise 構(gòu)造函數(shù)包含一個(gè)參數(shù)和一個(gè)帶有 resolve（解析）和 reject（拒絕）兩個(gè)參數(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() 包含兩個(gè)參數(shù)：一個(gè)用于成功情形的回調(diào)和一個(gè)用于失敗情形的回調(diào)。這兩個(gè)皆可選，因此您可以只添加一個(gè)用于成功情形或失敗情形的回調(diào)。

主要的 promise 的三個(gè)方法

Promise.all

- 這個(gè)方法返回一個(gè)新的promise對(duì)象，該promise對(duì)象在iterable參數(shù)對(duì)象里所有的promise對(duì)象都成功的時(shí)候才會(huì)觸發(fā)成功，一旦有任何一個(gè)iterable里面的promise對(duì)象失敗則立即觸發(fā)該promise對(duì)象的失敗。這個(gè)新的promise對(duì)象在觸發(fā)成功狀態(tài)以后，會(huì)把一個(gè)包含iterable里所有promise返回值的數(shù)組作為成功回調(diào)的返回值，順序跟iterable的順序保持一致；如果這個(gè)新的promise對(duì)象觸發(fā)了失敗狀態(tài)，它會(huì)把iterable里第一個(gè)觸發(fā)失敗的promise對(duì)象的錯(cuò)誤信息作為它的失敗錯(cuò)誤信息。Promise.all方法常被用于處理多個(gè)promise對(duì)象的狀態(tài)集合。

Promise.reject

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

return Promise.reject(error);

Promise.resolve

- 返回一個(gè)狀態(tài)由給定value決定的Promise對(duì)象。如果該值是thenable(即，帶有then方法的對(duì)象)，返回的Promise對(duì)象的最終狀態(tài)由then方法執(zhí)行決定；否則的話(該value為空，基本類型或者不帶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ì)象形式使用。

怎么創(chuàng)建一個(gè) Promise

Promise 對(duì)象是由關(guān)鍵字 new 及其構(gòu)造函數(shù)來(lái)創(chuàng)建的。

const myFirstPromise = new Promise((resolve, reject) => {
 // ?做一些異步操作，最終會(huì)調(diào)用下面兩者之一:
 //
 // resolve(someValue); // fulfilled
 // ?或
 // reject("failure reason"); // rejected
});

想讓某個(gè)函數(shù)擁有 Promise 功能？讓他放回一個(gè) Promise 對(duì)象就可以了：

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)建一個(gè) GET 請(qǐng)求的簡(jiǎn)單函數(shù)

function get(url) {
 // 返回一個(gè) promise 對(duì)象.
 return new Promise(function(resolve, reject) {
 // 創(chuàng)建一個(gè) XML 對(duì)象
 var req = new XMLHttpRequest();
 req.open('GET', url);

 req.onload = function() {
  
  if (req.status == 200) {
  // 請(qǐng)求 200的時(shí)候處理 response 
  resolve(req.response);
  }
  else {
  // 處理請(qǐng)求錯(cuò)誤信息
  reject(Error(req.statusText));
  }
 };

 // 處理網(wǎng)絡(luò)錯(cuò)誤信息
 req.onerror = function() {
  reject(Error("Network Error"));
 };

 // 發(fā)送請(qǐng)求
 req.send();
 });
}

現(xiàn)在我們來(lái)使用吧

get('story.json').then(function(response) {
 console.log("Success!", response);
}, function(error) {
 console.error("Failed!", error);
})

Demo: 2 -- 創(chuàng)建一個(gè)圖片上傳的 Promise 函數(shù)

function imgLoad(url) {
 //創(chuàng)建一個(gè)圖片上傳的 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) {
 
 // 處理錯(cuò)誤
 console.log(Error);
 });

下篇文章預(yù)告

大概內(nèi)容：promise 和錯(cuò)誤處理詳解，JavaScript 異步和 promise

參考