美文网首页
async和await

async和await

作者: 月下吴刚_c8c7 | 来源:发表于2018-11-24 15:53 被阅读0次

promise链

原来用promise的链式调用方式,then 中原本就返回了一个promise

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 3000); // (*)
}).then(function(result) { // (**)
  console.log(result); // 1
  return result * 2;   // 将返回的promise状态改为resolved 
}).then(function(result) { // (***)
  console.log(result); // 2
  return result * 2;
}).then(function(result) {
  console.log(result); // 4
  return result * 2;
});

async

函数前面的async一词意味着一个简单的事情:这个函数总是返回一个promise,如果代码中有return <非promise>语句,JavaScript会自动把返回的这个value值包装成promise的resolved值;调用就像普通函数一样调用,但是后面可以跟then()了

async function fn() {
    return 1
}
fn().then(alert) // 1

也可以显式的返回一个promise,这个将会是同样的结果:

async function f() {
  return Promise.resolve(1)
}
f().then(alert) // 1

async确保了函数返回一个promise,即使其中包含非promise。

await

await只能在async函数里使用,它可以让JavaScript进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行.
await 可以用于等待的实际是一个返回值,可是promise的返回值,也可以是普通函数的返回值,或者使一个变量, 注意到 await 不仅仅用于等 Promise 对象,它可以等任意表达式的结果,所以,await 后面实际是可以接普通函数调用或者直接变量的。

注意 :await不能在常规函数里使用await,不能工作在顶级作用域,只能在async函数中使用,

定义一个await
let  value = await promise  // value 可以得到promise成功后返回的结果, 然后才会继续向下执行
async function f() {    // await 只能在async函数中使用
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    let result = await promise   //  直到promise返回一个resolve值(*)才会执行下一句
    alert(result) // 'done!' 
}
f()
function getSomething() {
    return "something";
}
async function testAsync() {
    return Promise.resolve("hello async");
}
const xxx = {a:1,b:2}
async function test() {
    const v1 = await getSomething();   // await 后跟普通函数的返回值
    const v2 = await testAsync();     // await 后跟异步函数的返回值
    const v3 = await  xxx
    console.log(v1, v2,v3);
}
test();

一个class方法同样能够使用async,只需要将async放在实例方法之前就可以,它确保了返回值是一个promise,支持await.如下:

class Waiter {
   async wait () {
       return await Promise.resolve(1)
   }
}
new Waiter().wait().then(alert) // 1

await的异常处理

多个await连续时,会一个一个同步执行,如果中间有一个reject了,就会停止后面的代码执行,所以需要用 try...catch处理错误
用try/catch 来捕获异常,把await 放到 try 中进行执行,如有异常,就使用catch 进行处理。

 async getFaceResult () {
       try {
          let location = await this.getLocation(this.phoneNum);
           if (location.data.success) {
                   let province = location.data.obj.province;
                    let city = location.data.obj.city;
                    let result = await this.getFaceList(province, city);
                    if (result.data.success) {
                       this.faceList = result.data.obj;
                   }
               }
       } catch(err) {
            console.log(err);
       }
 }

相关文章

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • 使用 async 和 await,实现 fetch 同步请求

    使用 async 和 await,实现 fetch 同步请求 关于 async 和 await 的介绍https:...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

  • async-await

    一、async-await和Promise的关系 async-await是promise和generator的语法...

  • 小程序-云开发

    async和await async:异步(无等待)await:等待(是为了同步) 一、await 关键字只在 as...

  • async / await

    async / await 优缺点 async 和 await 相比直接使用 Promise 来说,优势在于处理 ...

  • flutter中compute和isolate

    async和await:对于普通的任务,使用async和await可实现异步处理任务,而async的处理方式并非使...

  • Promise 执行顺序

    使用 async 和 await

网友评论

      本文标题:async和await

      本文链接:https://www.haomeiwen.com/subject/ehfyqqtx.html