Promise中怎么自定義一個GET請求函數

這篇文章給大家介紹Promise中怎么自定義一個GET請求函數，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

語法

基本

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);
 });

關于Promise中怎么自定義一個GET請求函數就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。