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,一经查实,立即删除!

相关文章

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…