ES8中的Async和Await

Posted 2021-09-04 飞鹰

刚接触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的源码有一个更好的理解，今后的代码也会写的更优雅，更容易读，在维护的时候也会更容易，自己离前端攻城狮又近了一步。