生成器函数
简单使用:
// 生成器就是一个特殊的函数 // 异步编程 纯回调函数 node gs ajax mongodb function* 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() //我是延迟两秒后出现的内容 //我是一段正常的内容