ES8中的Async和Await

Posted 飞鹰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES8中的Async和Await相关的知识,希望对你有一定的参考价值。

刚接触js的时候,小编以为js就是用来做交互和效果的,后来随着接手项目的增加,才知道js有更重要的用途就是用来前后端数据交互,说到数据交互,就少不了异步的问题,之前小编也有几篇文章是说异步操作的,今天,小编和大家一起探讨现在很流行的方案,也就是之前说的generator的语法糖——async和await解决方案。大家还可以关注我的微信公众号,蜗牛全栈。
一、基本用法

// 返回的Promise对象
async function foo(){
    return "hello world" // Promise.resolve("hello world")
}
console.log(foo()) // Promise{<resolved>:"hello world"}
async function foo(){
    let reslut = await "hello world" // await正常跟异步操作,这里只做演示
    console.log(result)
}
foo() // hello world
function timeout(){
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1)
            resolve()
        },1000)
    })
}

async function foo(){
    timeout()
    console.log(2)
}

foo() // 2  1s后  --> 1
function timeout(){
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1)
            resolve()
        },1000)
    })
}

async function foo(){
    await timeout()
    console.log(2)
}

foo() // 1 2

二、与Promise对象callback结合:resolve里面的参数作为await的返回值

function timeout(){
    return new Promise(resolve => {
        setTimeout(() => {
            // console.log(1)
            resolve(1)
        },1000)
    })
}

async function foo(){
    const res = await timeout() // resolve里面的参数作为await的返回值
    console.log(res) // 1
    console.log(2)
}

foo()

三、await必须在async函数内,就类似yield关键字必须在generator函数内部类似

function timeout(){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            // console.log(1)
            // resolve(1)
            reject("fail")
        },1000)
    })
}
async function foo(){
    return await timeout() // await函数使用在async函数的里面
}

foo().then(res=>{

}).catch(err => {
    console.log(err)
}) // fail

四、再次封装ajax:通过封装原生ajax来实现功能(目录结构:在当前文件下存在一个static文件夹,文件夹内有三个文件a.json、b.json、c.json。每个文件内是一个对象,分别为{a:"我是a"}、{b:"我是b"}、{c:"我是c"})

// ajax.js
function ajax(url, callback) {
    // 1、创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject(\'Microsoft.XMLHTTP\')
    }
    // 2、发送请求
    xmlhttp.open(\'GET\', url, true)
    xmlhttp.send()
    // 3、服务端响应
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callback(obj)
        }
    }
}
export default ajax


// index.js
import ajax from "./ajax"

function request(url){
    return new Promise(resolve => {
        ajax(url,res => {
            resolve(res)
        })
    })
}

async function getData(){
    const res1 = await request("static/a.json")
    console.log(res1)
    const res2 = await request("static/b.json")
    console.log(res2)
    const res3 = await request("static/c.json")
    console.log(res3)
}
getData() // {a:"我是a"}  {b:"我是b"}  {c:"我是c"}

相信看到上面的实例之后,会对Vue的源码有一个更好的理解,今后的代码也会写的更优雅,更容易读,在维护的时候也会更容易,自己离前端攻城狮又近了一步。

以上是关于ES8中的Async和Await的主要内容,如果未能解决你的问题,请参考以下文章

ES8(2017)async / await

async和await

第126篇: 异步函数(async和await)

ES7-Es8 js代码片段

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题