ES6-18/19 異步的開端-promise

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250977.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250977.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250977.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

leetcode35 C++ 4ms 搜索插入位置

class Solution { public:int searchInsert(vector<int>& nums, int target) {for(int i 0;i<nums.size();i){if(nums[i] > target){return i;}}return nums.size()-1;} }; 轉載于:https://www.cnblogs.com/theodoric008/p/9449049.html

OpenCV-Python 中文教程(搬運)目錄

OpenCV-Python 中文教程 OpenCV官方教程中文版&#xff08;For Python&#xff09; OpenCV2-Python-Tutorials 段力輝 譯 說明&#xff1a;搬運自linux公社pdf文件&#xff0c;粗略搬運&#xff0c;僅作個人筆記參考&#xff0c;有時間再美化 部分文件參考&#xff1a; https:/…

算法 --- 平衡二叉樹

解題思路: 1.首先寫一個返回深度的函數d 2.寫一個遍歷函數t 3.在t中首先判斷,r是否為空(為空則此時就是平衡二叉樹,返回true),然后判斷是否為葉子節點(r.left null && r.right null)若是則返回true,最后判斷,其左子樹的深度與右子樹的深度之差是否大于1.若是則返回fal…

【co】ES6-20/21 iterator與generator

ES6-20 iterator與generator ES6-21 async與await、ES6的模塊化 try catch不能捕獲異步異常 try catch是同步代碼 try {setTimeout(() > {console.log(a)}) } catch (e) {console.log(e) }iterator 內部迭代器&#xff1a;系統定義好的迭代器接口&#xff08;如數組Symbol…

嵌入式系統UBOOT

一個完整的嵌入式linux系統包含4部分內容&#xff1a;Bootloader、Parameters、Kernel、Root File System。3、4、5、6部分詳細介紹了這4部分的內容&#xff0c;這是Linux底層軟件開發人員應該掌握的。通過學習這些章節&#xff0c;您可以詳細了解到如何在一個裸板上裁減、移植…

驅動芯片

一 LED驅動芯片&#xff1a; 1.1 TM1640:16位數碼管驅動芯片&#xff0c;2線制控制&#xff08;CLK/DIN&#xff09;,SCLK低電平時DIN輸入&#xff0c;而SCLK高電平時保持DIN保持不變&#xff1b;開始傳輸&#xff1a;SCLKH時DIN由高變低&#xff0c;停止傳輸SCLKH時DIN由由低變…

jquery --- 控制元素的隱藏/顯示

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> </head> <body> <div id"panel"><h5 class"head">什么是jquery?</h5><div class"content" style"display:non…

confusion_matrix(混淆矩陣)

作者&#xff1a;十歲的小男孩 凡心所向&#xff0c;素履可往 目錄 監督學習—混淆矩陣 是什么&#xff1f;有什么用&#xff1f;怎么用&#xff1f; 非監督學習—匹配矩陣 混淆矩陣 矩陣每一列代表預測值&#xff0c;每一行代表的是實際的類別。這個名字來源于它可以非常容…

Python 21 Django 實用小案例1

實用案例 驗證碼與驗證 KindEditor 組合搜索的實現 單例模式 beautifulsoup4 驗證碼與驗證 需要安裝Pillow模塊 pip stall pillow1、首先需要借助pillow模塊用來畫一個驗證碼圖形&#xff0c;這里單獨封裝了一個py文件&#xff0c;調用一個方法就好了 1 #!/user/bin/env python…

jquery --- 事件處理函數的event對象的幾個屬性(方法)說明

1.event.type: 事件的類型 $(a).click(function(event) {alert(event.type);return false; // 阻止鏈接跳轉 }); // click2.event.preventDefault(): 阻止默認事件 $("#sub").bind("click", function(event) {var username $("#username").va…

數據恢復軟件

鏈接&#xff1a;https://pan.baidu.com/s/1n6x5vhW-3SY8MAvvnqVtog 密碼&#xff1a;thh0轉載于:https://www.cnblogs.com/huanu/p/9452039.html

VMware

1.VMware軟件安裝&#xff1a; https://jingyan.baidu.com/article/9f7e7ec09da5906f281554d6.html 2&#xff0c;鏡像文件下載地址&#xff1a;http://www.cnbeta.com/articles/tech/566773.htm 有圖形界面。 或是在官網&#xff1a;https://wiki.centos.org/Download 2.cento…

jquery --- 全選、全不選、反選、提交

注意:jquery 提供的$(’#id’).attr(‘checked’,true)方法,在某些情況下會失效… 因此,使用js原生的 .checked true方法 控制 // html <form>你愛好的運動是? <br/><input type"checkbox" name"items" value"足球" /> 足球…

【重要】ES6-23 JavaScript模塊化

前端js模塊化的演變發展 模塊化解決的問題 傳統模塊化、插件化 CommonJS AMD/CMD ES6模塊化 ES6以前 沒有js引擎 一開始js寫在html的script標簽里js內容增多&#xff0c;抽取出index.js文件&#xff0c;外部引入js再增加&#xff0c;index.html對應index.js index2.html對應ind…

Quartz.Net定時任務EF+MVC版的web服務

之前項目采用JAVA 的 Quartz 進行定時服調度務處理程序&#xff0c;目前在.NET下面使用依然可以完成相同的工作任務&#xff0c;其實什么語言不重要&#xff0c;關鍵是我們要學會利用語言實現價值。它是一個簡單的執行任務計劃的組件&#xff0c;基本包括這三部分&#xff1a;J…

jquery --- 多選下拉框的移動(穿梭框)

效果如下: 幾個注意地方: 1.多選下拉框需要添加 multiple 2.獲取選中的元素KaTeX parse error: Expected EOF, got # at position 3: (#?id option:selec…(#id option:not(:selected)) 下面是代碼的各個部分實現, 方便引用,最后是總體代碼,方便理解 添加選中到右邊: // …

ES6-24 生成器與迭代器的應用

手寫生成器 先done再false&#xff0c;不然index就提前了一步1 var arr [1,2] function generator(arr){var i 0;return{next(){var done i > arr.length ? true : false,value done ? undefined : arr[i];return {value : value,done : done} }} } var gen gener…

1013 B. And

鏈接 [http://codeforces.com/contest/1013/problem/B] 題意 給你一個n和x,再給n個數&#xff0c;有一種操作用x&a[i]取代&#xff0c;a[i],問使其中至少兩個數相同&#xff0c;要多少次操作&#xff0c;如果不能輸出-1. 思路 x&a[i],無論&多少次&#xff0c;a[i]都…

jquery --- 收縮兄弟元素

點擊高亮的收縮兄弟元素. 思路: 1.點擊的其實是tr.(類為parent) 2.toggleClass可以切換樣式 3.slblings(’.class’).toggle 可以根據其類來進行隱藏顯示 代碼如下: <!DOCTYPE html> <html> <head> <meta charset"utf-8"><style>.pa…

Webpack基礎

path.resolve // 只要以/開頭&#xff0c;就變為絕對路徑 // ./和直接寫效果相同 var path require("path") //引入node的path模塊path.resolve(/foo/bar, ./baz) // returns /foo/bar/baz path.resolve(/foo/bar, baz) // returns /foo/bar/baz path.res…