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()
    //我是延迟两秒后出现的内容
    //我是一段正常的内容
相关文章
|
20天前
|
前端开发 JavaScript
Promise、async和await
Promise、async和await
15 0
|
1月前
|
前端开发 JavaScript 测试技术
ES6:什么是Promise?
ES6:什么是Promise?
15 0
|
2月前
|
数据采集 前端开发 JavaScript
如何在爬虫过程中正确使用Promise对象和async/await?
如何在爬虫过程中正确使用Promise对象和async/await?
24 2
|
1月前
|
前端开发
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
|
2月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
12天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
5天前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
13天前
|
前端开发 JavaScript
ES6:Promise使用方法解析大全
ES6:Promise使用方法解析大全
|
18天前
|
前端开发 JavaScript
在JavaScript中,回调函数、Promise和async/await这三种异步处理机制的优缺点
JavaScript的异步处理包括回调函数、Promise和async/await。回调函数简单易懂,但可能导致回调地狱和错误处理困难。Promise通过链式调用改善了这一情况,但仍有回调函数需求和学习成本。async/await提供同步风格代码,增强可读性和错误处理,但需ES8支持,不适用于并发执行。根据项目需求选择合适机制。
|
19天前
|
前端开发 JavaScript Java
Promise, async, await实现异步编程,代码详解
Promise, async, await实现异步编程,代码详解
21 1