Async和Await

 async

    async是一个异步的函数

    let fn = async () => {
        console.log('后');
        return 123
    }
    console.log('先');
    fn().then(res => {
        console.log(res);
    })

可以作用在任何方法前, 返回值是一个Promise对象(回调函数也可以使用async)

 let fn = async () => {
        return
    }
    console.dir(fn());

   函数内部return的返回值, 会成为then回调函数的参数  

    let fn = async () => {
        return  123
    }
    console.dir(fn());

    fn().then(res => {
        console.log(res); //123
    })

 

   async作用的方法,如果内部出现报错,可以被promise的catch方法捕获(reject也可以

    let fn = async () => {
        throw new Error("报错")
        return 123
    }


    //fn().then(res => {
    //    console.log(res);
    //}err=>{
    //  console.log(err); //Error: 报错
    //})


    fn().then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })

   常规使用,一般都会通过try catch进行有可能报错的代码处理(建议使用try catch进行有可能报错的代码处理因为await没reject

    let fn = async () => {
        try {
            const a = 1;
            a = 2
            return 1
        } catch (err) {
            console.log('try catch', err);
            return 2
        }
    }
    fn().then(res => {
        console.log(res) //2
    })

  

await

   await只能作用在async修饰的方法中,不能单独使用,如果使用报错

   await是会阻塞代码执行(从这里可以看出await是一个同步的操作，从上到下执行

    let fn1 = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(1)
            }, 1000);
        })
    }
    async function fn() {
        let res = await fn1();
        console.log("step2_1", res);
        console.log("step2_2")
    }
    fn();

   正常情况 await后面跟着一个Promise对象; 返回的是Promise对象的成功后结果; 如果是一个普通值,那么会直接返回这个值

    async function fn() {
        let res = await Promise.resolve("hello world");
        let res1 = await 'hello';
        console.log(res); //hello world
        console.log(res1);//hello
    }
    fn();

   reject的返回 await没有办法进行捕获(使用try catch进行捕获)

回调地狱

    回调地狱就是在异步js里，回调函数写的太多了，回调套回调。很难凭直觉看懂代码。

    setTimeout(function () {  //第一层
        console.log('hello');
        setTimeout(function () {  //第二程
            console.log('world');
            setTimeout(function () {   //第三层
                console.log('hello world');
            }, 3000)
        }, 2000)
    }, 1000)

   在平常代码中我们遇到回调地狱一般都是我们在数据请求的时候出现，我们需要上一个请求的一个值，才能进行下一个请求。

如：

    一个要求是请求地址，需要省、市、区 。我们就需要省的id，通过省的id请求某一个省里的市，在通过我们选的市的id去请求区。这样我们需要一个ajax异步请求的结果去请求下ajax异步就是一个回调地狱。

    let id = '选择的省id'
    $.ajax({
        type: "GET",
        url: "https://地区请求id?=" + id,
        success: function (res) {
            $.ajax({
                type: "GET",
                url: "https://地区请求?id=" + res.id,
                success: function (res) {
                    $.ajax({
                        type: "GET",
                        url: "https://地区请求?cid=" + res.cid,
                        success: function (res) {
                            this.list = res.data.data
                        },
                    })
                },
            })
        },
    })

Async、Await解决回调地狱

    let list = []
    let id = '选择的省id'
    let cid = '选择的市id'
    let province = function fn1(id) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://地区请求?id=" + id,
                success: function (res) {
                    resolve(res.id)
                },
            })
        })
    }
    let city = function fn2(id) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://地区请求?id=" + id,
                success: function (res) {
                    resolve(res.data.data)
                },
            })
        })
    }
    let area = function fn3(cid) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://地区请求?cid=" + cid,
                success: function (res) {
                    resolve(res.id)
                },
            })
        })
    }
    let fn = async function () {
        let a = await province(id) // 传入用户选中的省的id
        list = await city(a)   //通过用户选中的省的id，获取该省所有的市
        let c = await area(cid)  //传入用户选中的选择的市id
    }
    fn()