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