async await

1. async await

ES2017(es7) 标准引入了 async 函数，使得异步操作变得更加方便。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async 和 await 最大的好处是让前端有了能力 以同步的方式写异步的代码

2. async

async函数返回一个 Promise对象，语义上理解：当函数前面加上 async 表示函数内部有异步操作。

async function main(){ // 声明一个异步函数
    return 1  // return的结果 相当于resolve出去的结果
    // 会成为then方法回调函数的参数。
}
console.log(main()) // Promise {<resolved>: 1}
// 获取async返回的结果通过.then获取
main().then(res => console.log(res)); // 1

3. await

• await 关键字要在 async 关键字函数的内部，await 写在外面会报错。

• 正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。

• await右侧如果是函数，那么函数的return值就是「表达式的结果」

• await右侧如果是一个 ‘hello’ 或者什么值，那表达式的结果就是 ‘hello’

• await关键字会阻塞后面代码的运行(通过阻塞特点 控制ajax 或者settimeout的执行顺序)

async function f() {
  // await promise对象; // 得到的就是该对象reslove出去的结果
  // await function(){}; // 得到的就是该函数的返回值
  // await 3+5; // 得到的就是该表达式的结果
}
// await意为等待,等待后边表达式的结果
// 在 async函数 中, 使用await, 会等待表达式或者当前异步操作有了结果之后, 再去执行后边的语句

f().then(v => console.log(v)); // 这里得到的是  f函数 return出去的结果

async function async1() {
    console.log( 'async1 start' )
    await async2() // 使用await关键字之后 await下面的代码会被阻塞 也就是说会先跳出当前的async1函数
    // 等async2有了结果之后 ,下面代码才会执行。
    console.log('async1 end')；
}

async function async2() {
    console.log( 'async2' )
}

async1();

console.log( 'script start' );

// 打印结果会是 
// async1 start
// async2
// script start
// async1 end

4. async await 重构ajax

function getUser(){
    return new Promise((resolve,reject)=>{
        $.ajax({
            url:'http://bufantec.com/api/test/user/list?start=10',
            success(res){
                resolve(res)
            }
        })
    })
}

function getuserInfo(val){
    return new Promise((resolve,reject)=>{
        $.ajax({
                url:`http://bufantec.com/api/test/user/detail?id=${val}`,
                success(res){
                    reslove(res)
                }
            })
        })

    }
}
//简写形式
function getUser(){
    return $.ajax({
        url:'http://bufantec.com/api/test/user/list?start=10'
    })
}

function getuserInfo(val){
    return  $.ajax({
        url:`http://bufantec.com/api/test/user/detail?id=${val}`
    })
}

// getUser 获取用户列表, getuserInfo 获取某一位用户详情
// 调用getuserInfo 需要 等 getUser 有了结果之后
// 原来的解决方案: 回调 或者 promise链式编程

// 使用 async 和 await , 代码可读性变高了
async function getResult(){
    const result1 = await getUser();
    const result2 = await getuserInfo(result1.data.list[1].userId);
    console.log(result2);
}

getResult();