写点什么

async / await

作者:Jason199
  • 2022 年 7 月 06 日
  • 本文字数:2646 字

    阅读完需:约 9 分钟

async / await

async / await

ES7 的语法

          ES6 提出的方案, 但是 ES6 实现的不是很好

          再 ES7 的时候优化过

        目的:

          1. 回调地狱的终极解决办法

          2. 把异步代码写的看起来像同步代码

 使用方法:

        1. async 书写再函数的前面, 是对这个函数的修饰关键字

        2. await 的使用, 必须有 async 关键字, await 才可以再函数内部使用

        3. await 等待的必须是一个 promise 对象, 才会有等待的结果, 不然没有意义

        当你满足了以上三个条件以后, 你的 promise 对象本该再 then 里面接收的结果

          就可以直接定义变量接收

          你的 promise 里面的异步代码没有结束之前

          不会继续向下执行

 //fn 是一个异步函数    async function fn() {// await 关键字, 这个函数必须要有 async      const res = await pAjax({ url: './server/a.php', dataType: 'json' })// 当 pAjax 发送的请求没有回来之前, res 不会被赋值// 只有请求回来以后, res 才会被赋值// 如果这段打印先于请求回来执行, res 没有结果// 如果 res 有结果, 证明: 这段代码被延后执行了, 延后到后面的 promise 对象完成以后      console.log(res)      console.log('后续代码')     }      fn() async function fn() {     const res1 = await pAjax({ url: './server/a.php', dataType: 'json' })       console.log('需求1: ', res1)  const res2 = await pAjax({ url: './server/b.php', dataType: 'json', data: res1 })     console.log('需求2: ', res2)
const res3 = await pAjax({ url: './server/c.php', dataType: 'json', data: res2 }) console.log('需求3: ', res3)}console.log('start')fn()console.log('end')
复制代码


 const div = document.querySelector('div')    div.addEventListener('click', async () => {      const res1 = await pAjax({ url: './server/a.php', dataType: 'json' })      console.log('需求1: ', res1)
const res2 = await pAjax({ url: './server/b.php', dataType: 'json', data: res1 }) console.log('需求2: ', res2)
const res3 = await pAjax({ url: './server/c.php', dataType: 'json', data: res2 }) console.log('需求3: ', res3) })
复制代码

generator 函数

        一种长得很像函数的玩意

        但是不是函数, 函数生成器(迭代器)

使用方法:

        再定义函数的时候,  再 function 后面 或者 函数名前面加一个 星号(*)

        函数内部可以使用一个 yield 关键字

          类似于 return 一样的作用

          可以给你制造一个结果

          让这个 generator 暂停

          当你再次回到这个 generator 的时候, 从上次 yield 继续向后执行代码

        generator 的返回值是一个迭代器

          包含一个 next() 方法

          每一次 next 执行, 就会执行到下一个 yield 位置为止

 // 当有了星号以后, fn 不再是一个函数了    function* fn() {      console.log('我是第一段 代码')      yield '第一段结束'       console.log('我是第二段 代码')       yield '第二段结束'      console.log('我是第三段 代码')       return '第三段结束'    } // result 就是 fn 给生成一个 迭代器    const result = fn() // 第一次, 从 fn 的开头执行到第一个 yield, // 把 yield 后面的东西当作返回值    const first = result.next()    console.log(first)// 第二次, 从第一次的 yield 后面开始执行到第二个 yield 结束// 把 第二个 yield 后面的东西当作返回值    const second = result.next()    console.log(second)    const third = result.next()    console.log(third)
复制代码

for ... of 循环

        for () { } 遍历数组

        forEach() 遍历数组

        for ... of 循环, 可以遍历数组

        目的: 遍历迭代器

          遍历数组, 只是顺手

        迭代器不光是 generator


使用方法:  for (let value of 数组) {}

const arr = ['hello', 'world', '你好', '世界']     const obj = { name: 'jack' }     for (let key in arr) {       console.log(key, arr[key])     }     for (let value of arr) {       console.log(value)     }
复制代码

 Set 数据结构

        ES6 新增的数据结构

        迭代起结构的数据

        使用方法: new Set()

          可以再实例化的时候, 传递一个数组

          数组里面的每一个数据就是 set 数据类型的每一个数据

        特点: 不接受重复数据

          用它可以去重

        常用方法

          1. add()

            使用方法: set 数据类型.add(要添加的数据)

 const s = new Set(['hello', 'world', '你好', '世界'])    // 1. 添加 s.add(true)
复制代码

          2. delete()

            使用方法: set 数据类型.delete(要删除的数据)

const s = new Set(['hello', 'world', '你好', '世界'])    // 2. 删除s.delete('世界')
复制代码


          3. has()

            使用方法: set 数据类型.has(你要判断的数据)

            返回值: 你要判断的数据是不是存在

const s = new Set(['hello', 'world', '你好', '世界'])    // 3. 判断console.log(s.has('你好'))
复制代码

          4. clear()

            使用方法: set 数据类型.clear()

            清除所有数据


          5. forEach()

            语法: set 数据类型.forEach(function (item, item, set) {})

  s.forEach(function (item, t, set) {

      console.log(item, '-----', t, '-----', set)

    })

          6. for of 循环来遍历

// 6. for of 循环来遍历for (let value of s) {     console.log(value)     }
复制代码

          7. size 属性

            表示长度, Set 数据结构里面有多少数据

 console.log(s.size)

    console.log(s.length)

去重

  const arr = [1, 2, 3, 4, 5, 4, 3, 2, 3, 4, 5, 2, 1]
    const res = [...new Set(arr)]
    console.log(res)
复制代码


发布于: 刚刚阅读数: 4
用户头像

Jason199

关注

还未添加个人签名 2022.04.29 加入

一条努力上岸的咸鱼

评论

发布
暂无评论
async / await_Async_Jason199_InfoQ写作社区