ES6學習（四）

時間  2019-11-06
標籤 es6 學習 欄目 JavaScript 简体版
原文   原文鏈接

寫在前面

很久沒看es6了，昨天遇到一個與promise相關的bug，記錄下promise的相關知識了javascript

阮一峯老師的Promisejava

正文

Promise對象是一個構造函數，用來生成Promise實例。es6

基礎用法

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操做成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

####異步加載圖片json

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

####Promise對象實現的 Ajax 操做 getJSON是對 XMLHttpRequest 對象的封裝，用於發出一個針對 JSON 數據的 HTTP 請求，而且返回一個Promise對象。須要注意的是，在getJSON內部，resolve函數和reject函數調用時，都帶有參數。數組

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出錯了', error);
});

####注意小點promise

通常來講，調用resolve或reject之後，Promise 的使命就完成了，後繼操做應該放到then方法裏面，而不該該直接寫在resolve或reject的後面。因此，最好在它們前面加上return語句，這樣就不會有意外。app

new Promise((resolve, reject) => {
  return resolve(1);
  // 後面的語句不會執行
  console.log(2);
})

方法

Promise.prototype.then()

Promise 實例具備then方法，也就是說，then方法是定義在原型對象Promise.prototype上的。它的做用是爲異步

Promise 實例添加狀態改變時的回調函數。函數

then方法的第一個參數 resolved狀態的回調函數， 第二個參數（可選） rejected狀態的回調函數。oop

能夠採用鏈式寫法 鏈式中後一個then的執行是要在前一個then返回的Promise對象變化時再執行。。

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回調函數。

// 基本用法
getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 處理 getJSON 和 前一個回調函數運行時發生的錯誤
  console.log('發生錯誤！', error);
});

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同於，
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

第二個then第一個參數null，只有rejected處理,

promise拋出一個錯誤，就被catch方法指定的回調函數捕獲。

// 寫法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error('test');
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);
});

// 寫法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

reject方法的做用，等同於拋出錯誤。

const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });

Promise 在resolve語句後面，再拋出錯誤，不會被捕獲，等於沒有拋出。由於

** Promise 的狀態一旦改變，就永久保持該狀態**，

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

不會再變了。

Promise 對象的錯誤具備**「冒泡」性質**，會一直向後傳遞，直到被捕獲爲止。也就是說，錯誤老是會被下一個catch語句捕獲。 可是這種冒泡只有鏈條中能夠處理

跟傳統的try/catch代碼塊不一樣的是，若是沒有使用catch方法指定錯誤處理的回調函數，Promise 對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應

Promise 內部的錯誤不會影響到 Promise 外部的代碼，通俗的說法就是「Promise 會吃掉錯誤」。

Promise.prototype.finally()

finally方法用於指定無論 Promise 對象最後狀態如何，都會執行的操做。該方法是 ES2018 引入標準的。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

無論promise最後的狀態，在執行完then或catch指定的回調函數之後，都會執行finally方法指定的回調函數。

finally方法的回調函數不接受任何參數，這意味着沒有辦法知道，前面的 Promise 狀態究竟是fulfilled仍是rejected。這代表，

finally方法裏面的操做，應該是與狀態無關的，

不依賴於 Promise 的執行結果。

finally本質上是then方法的特例。

promise
.finally(() => {
  // 語句
});

// 等同於
promise
.then(
  result => {
    // 語句
    return result;
  },
  error => {
    // 語句
    throw error;
  }
);

Promise.all()

Promise.all方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例。

const p = Promise.all([p1, p2, p3]);

p的狀態由p一、p二、p3決定，分紅兩種狀況。

（1）只有p一、p二、p3的狀態都變成fulfilled，

p的狀態纔會變成fulfilled，此時p一、p二、p3的返回值組成一個數組，傳遞給p的回調函數。

（2）只要p一、p二、p3之中有一個被rejected，

p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

// 生成一個Promise對象的數組
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});

遍歷接口的好方法。。

若是做爲參數的 Promise 實例，本身定義了catch方法，那麼它一旦被rejected，並不會觸發Promise.all()的catch方法。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('報錯了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 報錯了]

p1會resolved，p2首先會rejected，可是p2有本身的catch方法，該方法返回的是一個新的 Promise 實例，p2指向的其實是這個實例。該實例執行完catch方法後，也會變成resolved，致使Promise.all()方法參數裏面的兩個實例都會resolved，所以會調用then方法指定的回調函數，而不會調用catch方法指定的回調函數。

若是p2沒有本身的catch方法，就會調用Promise.all()的catch方法。

Promise.race()

一樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。

只要p一、p二、p3之中有一個實例率先改變狀態，p的狀態就跟着改變。那個率先改變的 Promise 實例的返回值，就傳遞給p的回調函數。

Promise.race方法的參數與Promise.all方法同樣，若是不是 Promise 實例，就會先調用下面講到的Promise.resolve方法，將參數轉爲 Promise 實例，再進一步處理。

Promise.resolve()

將現有對象轉爲 Promise 對象，Promise.resolve方法就起到這個做用。

Promise.resolve('foo')
// 等價於
new Promise(resolve => resolve('foo'))

Promise.resolve方法的參數分紅四種狀況。

（1）參數是一個 Promise 實例

若是參數是 Promise 實例，那麼Promise.resolve將不作任何修改、原封不動地返回這個實例。

（2）參數是一個thenable對象

thenable對象指的是具備then方法的對象，好比下面這個對象。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve方法會將這個對象轉爲 Promise 對象，而後就當即執行thenable對象的then方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

上面代碼中，thenable對象的then方法執行後，對象p1的狀態就變爲resolved，從而當即執行最後那個then方法指定的回調函數，輸出 42。

（3）參數不是具備then方法的對象，或根本就不是對象

若是參數是一個原始值，或者是一個不具備then方法的對象，則Promise.resolve方法返回一個新的 Promise 對象，狀態爲resolved。

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

上面代碼生成一個新的 Promise 對象的實例p。因爲字符串Hello不屬於異步操做（判斷方法是字符串對象不具備 then 方法），返回 Promise 實例的狀態從一輩子成就是resolved，因此回調函數會當即執行。Promise.resolve方法的參數，會同時傳給回調函數。

（4）不帶有任何參數

Promise.resolve方法容許調用時不帶參數，直接返回一個resolved狀態的 Promise 對象。

因此，若是但願獲得一個 Promise 對象，比較方便的方法就是直接調用Promise.resolve方法。

const p = Promise.resolve();

p.then(function () {
  // ...
});

上面代碼的變量p就是一個 Promise 對象。

須要注意的是，當即resolve的 Promise 對象，是在本輪「事件循環」（event loop）的結束時，而不是在下一輪「事件循環」的開始時。

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

上面代碼中， setTimeout(fn, 0)在下一輪「事件循環」開始時執行，

Promise.resolve()在本輪「事件循環」結束時執行，

console.log('one')則是當即執行，所以最早輸出。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程