生成器函数
简单使用:
// 生成器就是一个特殊的函数// 异步编程 纯回调函数 node gs ajax mongodbfunction* gen() {// console.log(111);yield '一只没有耳朵';// console.log(222);yield '一只没有尾巴';// console.log(333);yield '真奇怪';// console.log(444);}let iterator = gen()console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())// 遍历for (let v of gen()) {console.log(v)}
生成器函数参数
function* gen(arg) {console.log(arg)let one = yield 111;console.log(one)let two = yield 222;console.log(two)let three = yield 333;console.log(three)}// 执行获取迭代器对象let iterator = gen('AAA');console.log(iterator.next())console.log(iterator.next('BBB'))console.log(iterator.next('CCC'))console.log(iterator.next('DDD'))// next 方法可以传入形参
生成器函数实例
// 1s 控制台输出111, 2s输出222, 3s 输出333// 回调地狱// setTimeout(() => {// console.log(111)// setTimeout(() => {// console.log(222)// setTimeout(() => {// console.log(333)// },3000)// }, 2000)// }, 1000)function one() {setTimeout(() => {console.log(111)iterator.next()}, 1000)}function two() {setTimeout(() => {console.log(222)iterator.next()}, 1000)}function three() {setTimeout(() => {console.log(333)}, 1000)}function* gen() {yield one();yield two();yield three();}// 调用生成器函数let iterator = gen()iterator.next()
生成器函数实例2:
// 模拟获取 用户数据 订单数据 商品数据function getUsers() {setTimeout(() => {let data = '用户数据'// 调用next 方法 ,并且data传入iterator.next(data)}, 1000)}function getOrders() {setTimeout(() => {let data = '订单数据'iterator.next(data)}, 1000)}function getGoods() {setTimeout(() => {let data = '商品数据'iterator.next(data)}, 1000)}// 声明生成器函数function* gen() {let users = yield getUsers();console.log(users)let orders = yield getOrders();console.log(orders)let goods = yield getGoods();console.log(goods)}// 调用生成器函数let iterator = gen();iterator.next()
Promise的使用
Promise的基本认识
promise有三种状态:pending/reslove/reject 。pending就是未决,resolve可以理解为成功,reject可以理解为拒绝。
// Promise 是ES6引入的异步编程的新解决方案,语法上promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果// 1 Promise 构造函数: Promise(excutor){}// 2 Promise.prototype.then 方法// 3 Promise.prototype.catch 方法// 实例化Promise对象const p = new Promise(function (resolve, reject) {setTimeout(function () {// 调用成功的函数let data = '数据库中的用户数据'resolve(data)// 调用失败的函数// let err = '数据读取失败'// reject(err)}, 1000)})// 调用 promise 对象的 then 方法p.then(function (v) {console.log(v)}, function (v) {console.log(v)})
Promise的then方法
// 创建Promise对象const p = new Promise(function (resolve, reject) {setTimeout(() => {resolve('用户数据')}, 1000)})//调用then方法 then方法的返回结果是Promise,对象的状态由回调函数的执行结果决定// 1.如果回调函数中的返回结果是非Promise类型的属性,状态为成功,返回值为对象的成功值const result = p.then(function (v) {console.log(v)// 1 非promise 类型的属性// return 123// 2 是Promise 对象// return new Promise(function (resolve, reject) {// resolve('OK')// reject('error')// })// 3 抛出错误throw new Error('出错啦')}, function (reason) {console.warn(reason)})console.log(result)// 链式调用P.then(v => { }).then(v => { })
promise的catch方法
const p = new Promise(function (resolve, reject) {setTimeout(() => {// 设置p对象的状态为失败,并设置失败的值reject('出错啦!')}, 1000)})// catch相当于 语法糖(因为只用then一样可以实现)p.catch(function (reason) {console.log(reason)})
promise封装ajax
const p = new Promise(function (resolve, reject) {// 1,创建对象const xhr = new XMLHttpRequest();// 2 初始化xhr.open('get', 'https://api.apiopen.top/getJoke');// 3 发送xhr.send();// 4 绑定事件,处理相应结果xhr.onreadystatechange = function () {// 判断if (xhr.readState === 4) {// 判断响应码if (xhr.status >= 200 && xhr.status < 300) {// 表示成功resolve(xhr.response)} else {// 如果失败reject(xhr.status)}}}})p.then(function (v) {console.log(v)}, function (reason) {console.log(reason)})
promis 读取多个文件
const p = new Promise(function (resolve, reject) {fs.readFile('./锄禾.md', (err, data) => {resolve(data)})})p.then(value => {return new Promise((resolve, reject) => {fs.readFile('./插秧.md', (err, data) => {resolve([value, data])})})}).then(value => {return new Promise((resolve, reject) => {fs.readFile('./观书有感.md', (err, data) => {// 压入resolve(value.push(data))})})}).then(value => {ocnsole.log(value.join('\r\n'))})
promise.all&&promise.allSettled
// 声明两个promise对象const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('数据1')}, 1000)})const p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve('shibai')}, 1000)})//调用allsettled 方法 ,即使有一个失败也会返回成功// const result = Promise.allSettled([p1, p2]);// console.log(result)// all 只要有一个失败就返回失败的回调,如果全部成功,则返回一个只有数据的数组const res = Promise.all([p1, p2]);console.log(res)
async和await
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。
async function eg() {return '我是一个字符串'}console.log(eg()) // Promise {<fulfilled>: "我是一个字符串"}eg().then(v => {console.log(v); // 我是一个字符串})
await
正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数。
async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。
await针对所跟不同表达式的处理方式:
- Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
- 非 Promise 对象:直接返回对应的值。
function time() {return new Promise((resolve, reject) => {setTimeout(() => { console.log('我是延迟两秒后出现的内容'); resolve() }, 2000)})}async function eg2() {await time()console.log('我是一段正常的内容')}eg2()//我是延迟两秒后出现的内容//我是一段正常的内容