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.mzph.cn/news/250977.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法 --- 平衡二叉树

解题思路: 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 内部迭代器:系统定义好的迭代器接口(如数组Symbol…

驱动芯片

一 LED驱动芯片: 1.1 TM1640:16位数码管驱动芯片,2线制控制(CLK/DIN),SCLK低电平时DIN输入,而SCLK高电平时保持DIN保持不变;开始传输:SCLKH时DIN由高变低,停止传输SCLKH时DIN由由低变…

confusion_matrix(混淆矩阵)

作者:十岁的小男孩 凡心所向,素履可往 目录 监督学习—混淆矩阵 是什么?有什么用?怎么用? 非监督学习—匹配矩阵 混淆矩阵 矩阵每一列代表预测值,每一行代表的是实际的类别。这个名字来源于它可以非常容…

Python 21 Django 实用小案例1

实用案例 验证码与验证 KindEditor 组合搜索的实现 单例模式 beautifulsoup4 验证码与验证 需要安装Pillow模块 pip stall pillow1、首先需要借助pillow模块用来画一个验证码图形,这里单独封装了一个py文件,调用一个方法就好了 1 #!/user/bin/env python…

数据恢复软件

链接:https://pan.baidu.com/s/1n6x5vhW-3SY8MAvvnqVtog 密码:thh0转载于:https://www.cnblogs.com/huanu/p/9452039.html

VMware

1.VMware软件安装: https://jingyan.baidu.com/article/9f7e7ec09da5906f281554d6.html 2,镜像文件下载地址:http://www.cnbeta.com/articles/tech/566773.htm 有图形界面。 或是在官网:https://wiki.centos.org/Download 2.cento…

【重要】ES6-23 JavaScript模块化

前端js模块化的演变发展 模块化解决的问题 传统模块化、插件化 CommonJS AMD/CMD ES6模块化 ES6以前 没有js引擎 一开始js写在html的script标签里js内容增多,抽取出index.js文件,外部引入js再增加,index.html对应index.js index2.html对应ind…

jquery --- 多选下拉框的移动(穿梭框)

效果如下: 几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected EOF, got # at position 3: (#̲id option:selec…(#id option:not(:selected)) 下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解 添加选中到右边: // …

ES6-24 生成器与迭代器的应用

手写生成器 先done再false,不然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…

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…

LeetCode:二叉树相关应用

LeetCode&#xff1a;二叉树相关应用 基础知识 617.归并两个二叉树 题目 Given two binary trees and imagine that when you put one of them to cover the other, some nodes of the two trees are overlapped while the others are not. You need to merge them into a new …

jquery --- 网页选项卡

点击,不同的tab_menu,显示不同的tab_box 注意点: 1.获取ul下,当前li的编号. $(‘div ul li’).index(this) 2.显示ul下编号为$index的li -> $(‘ul li’).eq($index) <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style&g…

Webpack进阶(二)代码分割 Code Splitting

源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入&#xff08;如lodash包&#xff09;的代码 1mb若更新了业务逻辑代码&#xff0c;但在浏览器运行时每次都下载2mb的index.js显然不合理&#xff0c;第三方包是不会变的 手动拆分 webpack.base.js entry: {main: path.re…

5177. 【NOIP2017提高组模拟6.28】TRAVEL (Standard IO)

Description Input Output Solution 有大佬说&#xff1a;可以用LCT做。&#xff08;会吗&#xff1f;不会&#xff09; 对于蒟蒻的我&#xff0c;只好用水法&#xff08;3s&#xff0c;不虚&#xff09;。 首先选出的泡泡怪一定是连续的一段 L&#xff0c; R 然后 L 一定属于虫…

python 3.x 爬虫基础---http headers详解

python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 python 3.x 爬虫基础---Requersts,BeautifulSoup4&#xff08;bs4&#xff09; python 3.x 爬虫基础---正则表达式 前言  上一篇文章 python 爬虫入门案例----爬取某站上海租房…

Webpack进阶(三)

懒加载 lazy loading 用到的时候才加载vue 首屏不加载index.js const oBtn document.getElementById(j-button) oBtn.onclick async function () {const div await createElement()document.body.appendChild(div) } async function createElement() {const { default: _ …

P2634 [国家集训队]聪聪可可

链接&#xff1a;https://www.luogu.org/problemnew/show/P2634 题目描述 聪聪和可可是兄弟俩&#xff0c;他们俩经常为了一些琐事打起来&#xff0c;例如家中只剩下最后一根冰棍而两人都想吃、两个人都想玩儿电脑&#xff08;可是他们家只有一台电脑&#xff09;……遇到这种问…

算法 --- 快慢指针判断链表是否有环

解题思路: 分别设置2个指针(s,q)指向链表的头部,s每次指向下面一个(s s.next),q每次指向下面2个(q q.next.next). 如果存在环,q总会在某一时刻追上s /*** Definition for singly-linked list.* function ListNode(val) {* this.val val;* this.next null;* }*//**…