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