ES8中的Async和Await

2021-06-27 09:31:24 阅读：194 来源： 互联网

标签：function resolve console log Await ES8 Async foo 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的源码有一个更好的理解，今后的代码也会写的更优雅，更容易读，在维护的时候也会更容易，自己离前端攻城狮又近了一步。

标签：function,resolve,console,log,Await,ES8,Async,foo,await
来源： https://www.cnblogs.com/feiying3995/p/14939903.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES8中的Async和Await