Just contact js, small make up that js is used for interaction and effect, then with the increase of take over project, only know that there are more important purpose is to js end data before and after interaction, when it comes to data interaction, is not the problem of asynchronous, small make up before there are a few articles is asynchronous operations, said today, small make up to discuss with you is very popular now, This is the generator’s syntactic sugar – async and await solutions. You can also follow my wechat public number, snail full stack.

First, basic usage

// Return the Promise object
async function foo(){
    return "hello world" // Promise.resolve("hello world")
}
console.log(foo()) // Promise{<resolved>:"hello world"}
Copy the code
async function foo(){
    let reslut = await "hello world" // await is normal with async operations. This is for demonstration only
    console.log(result)
}
foo() // hello world
Copy the code
function timeout(){
    return new Promise(resolve= > {
        setTimeout(() = > {
            console.log(1)
            resolve()
        },1000)})}async function foo(){
    timeout()
    console.log(2)
}

foo() // 2 After 1s --> 1
Copy the code
function timeout(){
    return new Promise(resolve= > {
        setTimeout(() = > {
            console.log(1)
            resolve()
        },1000)})}async function foo(){
    await timeout()
    console.log(2)
}

foo() / / 1. 2
Copy the code

Combine with the Promise object callback: the argument in resolve is the return value of await

function timeout(){
    return new Promise(resolve= > {
        setTimeout(() = > {
            // console.log(1)
            resolve(1)},1000)})}async function foo(){
    const res = await timeout() // The argument in resolve is the return value of await
    console.log(res) / / 1
    console.log(2)
}

foo()
Copy the code

Await must be inside the async function, just as yield must be inside the Generator function

function timeout(){
    return new Promise((resolve,reject) = > {
        setTimeout(() = > {
            // console.log(1)
            // resolve(1)
            reject("fail")},1000)})}async function foo(){
    return await timeout() // Await function is used in async function
}

foo().then(res= >{

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

Directory structure: there is a static folder under the current file, and there are three files a.JAXon, B.JAXon, and C.jaxon. {a:” I am a”}, {b:” I am b”}, {c:” I am C “})

// ajax.js
function ajax(url, callback) {
    // 1, create XMLHttpRequest object
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // Compatible with earlier browsers
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')}// 2. Send the request
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3. The server responds
    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:" I'm a"} {b:" I'm b"} {c:" I'm C "}
Copy the code

I believe that after seeing the above instance, will have a better understanding of the Vue source code, the future code will be written more elegant, easier to read, in maintenance will be easier, oneself from the front of the siege city lion and a step closer.