es6 Promise,生成器函数,async

简介: es6 Promise,生成器函数,async

生成器函数


简单使用:

// 生成器就是一个特殊的函数
    // 异步编程 纯回调函数 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()
    //我是延迟两秒后出现的内容
    //我是一段正常的内容
相关文章
|
1月前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
26 1
|
1月前
|
前端开发
理解 ES6 中的 Promise
【10月更文挑战第24天】ES6 中的 Promise 是一种用于处理异步操作的机制,它提供了一种更优雅、更可控的方式来处理异步任务的结果。Promise 可以看作是对异步操作结果的一种承诺,它可以处于三种不同的状态:Pending(等待中)、Fulfilled(已完成,即成功)和 Rejected(已拒绝,即失败)。
|
20天前
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
33 5
|
20天前
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
36 4
|
1月前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
30 1
|
2月前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
2月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
2月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
20 1
|
2月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
21 0
|
7月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
68 1