ES6-18異步的開端-promise
ES6-19 promise的使用方法和自定義promisify

• try catch只能捕獲同步異常，不能捕獲異步的
  
• 等待所有異步都執行完，打印結果，比較笨拙的方法，在每個異步操作加arr.length === 3 && show(arr)

Promise是構造函數

• 原型上的方法then、catch、finally

• 其余都在構造函數上：all、race、reject、resolve
  

• 實例化的參數executor是一個函數

• executor里的代碼是同步的

• executor接收2個參數resolve、reject，這2個回調函數是異步的

• 執行順序同步>resolve（異步微任務）>setTimeout（異步宏任務）

Promise對象實現的 Ajax

const getJSON = function (url) {const promise = new Promise(function (resolve, reject) {const handler = function () {console.log('client實例', this)if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.status));}};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.log('請求狀態碼', error); // 請求狀態碼 Error: 404 });

鏈式調用

• 每次.then返回的是一個新的Promise實例，在下一個.then接收

返回值是Promise時

const p1 = new Promise(function (resolve, reject) {console.log('p1', new Date()) // p1 Sun Jul 25 2021 15:33:01 GMT+0800 (臺北標準時間)setTimeout(() => {console.log('10s后p1-resolved', new Date()) // 10s后p1-resolved Sun Jul 25 2021 15:33:11 GMT+0800 (臺北標準時間)reject(new Error('fail'))}, 10000) })const p2 = new Promise(function (resolve, reject) {console.log('p2', new Date()) // p1 Sun Jul 25 2021 15:33:01 GMT+0800 (臺北標準時間)setTimeout(() => {console.log('1s后p2-resolved', new Date(), p1) // 1s后p2-resolved Sun Jul 25 2021 15:33:02 GMT+0800 (臺北標準時間)resolve(p1)}, 1000) })p2.then(result => console.log(result)).catch(error => console.log('err', error)) // err Error: fail

異步代碼

• 分為宏任務（宏任務隊列）、微任務（微任務隊列）
• 除了resolve、reject和node的process.nextTick是微任務，其他是宏任務？
• 事件循環、輪詢

const { log } = console // 一開始的微任務隊列 q1 Promise.resolve().then(() => {log('promise1')setTimeout(() => { // 進入q2log('st2')}) }) // 一開始的宏任務隊列 q2 setTimeout(() => {log('st1')Promise.resolve().then(() => {log('promise2')}) }) // promise1 // st1 // promise2 // st2

executor報錯

• 會吃掉狀態固化以后，executor代碼的錯誤

const p = new Promise((resolve, reject) => {resolve(1)console.log(a) // 報錯 但是外部不體現 }) p.then((data) => {console.log(data)//1 }) new Promise((resolve, reject) => {resolve(2);console.log('P2同步'); }).then(r => {console.log(r);//2 }); // P2同步 // 1 // 2 const p = new Promise((resolve, reject) => {resolve(a) // 這樣報錯外部就會體現了// ReferenceError: a is not defined }) p.then((data) => {console.log(data) })

構造器上方法

• 參數是有iterator接口的數據結構

all

• 都成功，返回都成功的結果，在.then里能拿到這個數組
• 若有一出錯，在.catch里拿到第一個失敗的？

race

• 無論成功還是失敗，返回第一個成功or失敗的Promise

thenable

let obj = {then: function (resolve, reject) {resolve(1)} } let p = Promise.resolve(obj) // 轉成promise對象 p.then((val) => {console.log(val) // 1 })

// reject怎么做

promisify

• 手寫promisify

const fs = require('fs') function readFile(path) {return new Promise((resolve, reject) => {fs.readFile(path, 'utf-8', (err, data) => {if (err) {reject(new Error(err))} else {resolve(data)}})}) } readFile('first.txt').then((data) => {return readFile(data) }).then((data) => {return readFile(data) }).then((data) => {console.log(data) })

• 使用node提供的工具類方法

const fs = require('fs') function promisify(func) {return function (...args) {return new Promise((resolve, reject) => {func(...args, (err, data) => {if (err) {reject(new Error(err))} else {resolve(data)}})})} } let readFile = promisify(fs.readFile) readFile('first.txt', 'utf-8') .then(data =>readFile(data, 'utf-8')) .then(data =>readFile(data, 'utf-8')) .then(data => console.log(data)) const fs = require('fs') const util = require('util') let readFile = util.promisify(fs.readFile) readFile('first.txt', 'utf-8') .then(data =>readFile(data, 'utf-8')) .then(data =>readFile(data, 'utf-8')) .then(data => console.log(data))

• 將fs上的所有方法都promisify

function promisifyAll(obj) {for (let [key, fn] of Object.entries(obj)) {if (typeof fn === 'function') {obj[key + 'Async'] = promisify(fn)}} } promisifyAll(fs) function promisify(func) {return function (...args) {return new Promise((resolve, reject) => {func(...args, (err, data) => {if (err) {reject(new Error(err))} else {resolve(data)}})})} } let readFile = fs.readFileAsync

總結

以上是生活随笔為你收集整理的ES6-18/19 异步的开端-promise的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。