JavaScript的异步编程(包括ES6)

前端开发中常见的两种异步情况

1.ajax：向后台请求数据 2.计时器：setInterval、setTimeout

基本概念

问题一：如何获取到异步数据

回调函数：将函数作为参数传递给另一个函数 例如：先喝奶茶才吃火锅

function getTea(){ setTimeout(() => { fn("奶茶") },2000) }

function getHotPot(){ setTimeout(() => { fn("火锅") },1000) }

getTea((data) =>{ console.log(data); getHotPot((data) => { console.log(data); }) })

以此类推有时候同时发生的事件多的时候就会嵌套很多回调函数从而变成回调地狱

问题二：如何摆脱回调地狱

用promise对象

    let tea = new Promise((resolve,reject) =>{
        setTimeout(() => {
            let flag = true;
            if (flag) {
                resolve("奶茶")
            }else{
                reject("获取奶茶失败")
            }
            },2000)
    })
    let hotPot = new Promise((resolve,reject) =>{
        setTimeout(() => {
            let flag = true;
            if (flag) {
                resolve("火锅")
            }else{
                reject("获取火锅失败")
            }
            },2000)
    })

    // tea.then((data) => {
    //     console.log(data);
    // }).catch((err) => {
    //     console.log(err);
    // })
    // hotPot.then((data) =>{
    //     console.log(data);
    // }).catch((err) => {
    //     console.log(err);
    // })
    
    
    async function fun() {
        const dataTea = await tea;
        console.log(dataTea);
        const dataHotPot = await hotPot;
        console.log(dataHotPot);
    }
    fun();