生成器函数

简单使用：

 // 生成器就是一个特殊的函数// 异步编程 纯回调函数 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()//我是延迟两秒后出现的内容//我是一段正常的内容

es6 Promise,生成器函数，async相关推荐

ES6新特性_ES6生成器函数的参数传递---JavaScript_ECMAScript_ES6-ES11新特性工作笔记021
然后我们再来看es6中生成器函数的参数传递. 首先看一个例子,没有参数的,可以看到右边执行结果. 然后看如果我给这个gen('AAA')调用的时候传一个值可以看到右边没有反应,我们说生成器函数调用需 ...
JS 异步发展流程(回调函数=Async/await)
异步编程的语法目标,就是怎样让它更像同步编程什么是异步? 异步任务指的是,不进入主线程.而进入"任务队列"(task queue)的任务,只有"任务队列"通知 ...
【ES6】异步操作和async函数
[ES6]异步操作和async函数一.基本概念二.回调函数三.Promise 四.async函数查看更多ES6教学文章: 参考文献引言:ES6新增的Generato.Promise.asyn ...
石川es6课程---13-16、generator-认识生成器函数
石川es6课程---13-16.generator-认识生成器函数一.总结一句话总结: ` generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 ` 需要调用next() ...
es6 --- promise和async/await的区别
首先需要了解async函数: async是Generator函数的语法糖: // 使用Generator依次读取两个文件 var fs = require('fs'); var readFile = ...
ES6生成器函数generator
ES6生成器函数generator generator是ES6新增的一个特殊函数,通过 function* 声明,函数体内通过 yield 来指明函数的暂停点,该函数返回一个迭代器,并且函数执行到 y ...
Promise对象和async函数
Promise对象 //1开始 function fna(){console.log('1开始');var p = new Promise(function(resolve, reject){ //做 ...
ES6新特性_ES6生成器函数实例_第二个实例---JavaScript_ECMAScript_ES6-ES11新特性工作笔记023
然后我们再来看一个案例这里我们说生成器函数是针对异步编程的解决方案,我们看看他是怎么解决的, 我们知道这个setTimeout是异步执行的,那么我们这里现在有这样一个需求,我们先拿到某个用户数据, ...
ES6新特性_ES6生成器函数实例---JavaScript_ECMAScript_ES6-ES11新特性工作笔记022
生成器函数是针对异步编程的一个解决方案我们知道ajax,是异步的,其实文件操作,网络操作,数据库操作,都是异步的我们这里做个例子就是1s后输出111,2s后输出222,3s后输出333,可以用上 ...

es6 Promise,生成器函数，async

生成器函数

Promise的使用

async和await

await

es6 Promise,生成器函数，async相关推荐

最新文章

热门文章