async/await,promise的优缺点

async/await

  1. await后面接一个会return new promise的函数并执行它
  2. await只能放在async函数里

举例:

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

上面这段代码async中使await 摇色子()先执行,等到三秒后执行完再把得到的结果赋值给左边的n,也就是说test函数需要三秒钟才执行完成,所以test函数是异步的,因此前面必须写async

把await和成功后的操作放到try里,失败的放在catch

async function test(){
    try{
        //把await及获取它的值的操作放在try里
        let n =await 摇色子('大')
        console.log('赢了' + n)
    }catch(error){
      //失败的操作放在catch里
        console.log('输了' + error)
    }
}
test()

Promise

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

resolve作用是:

将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject作用是:

将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

promise有三个状态:

  1. pending[待定]初始状态
  2. fulfilled[实现]操作成功
  3. rejected[被否决]操作失败

当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;

promise状态一经改变,不会再变。

Promise对象的状态改变,只有两种可能:
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了。

举例(分俩次进行):

new Promise(resolve => {
    setTimeout(() => {
      resolve('hello')
    }, 2000)
  }).then(val => {
    console.log(val) //  参数val = 'hello'
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('world')
      }, 2000)
    })
  }).then(val => {
    console.log(val) // 参数val = 'world'
  })

Promise完成后.then()

let pro = new Promise(resolve => {
   setTimeout(() => {
     resolve('hello world')
   }, 2000)
 })
 setTimeout(() => {
   pro.then(value => {
   console.log(value) // hello world
 })
 }, 2000)

捕获错误:

Promise对象内部其实自带了try catch,当同步代码发生运行时错误时,会自动将错误对象作为值reject,这样就会触发catch注册的回调,如下:

let p = new Promise((resolve, reject) => {
  throw "error";
});

p.catch(err => {
  console.log("catch " + err); // catch error
});

async/await的优点

(1)async/awsit他做到了真正的串行的同步写法,代码阅读相对容易
(2)对于条件语句和其他流程语句比较友好,可以直接写到判断条件里面
(3)async/await处理复杂流程时,在代码清晰度方面具有优势

async/await的特点

(4)无法处理Promise返回reject对象,要借助try...catch
(5)async/await中await只能串行,做不到并行,{await不在同一个async函数里就可以并行}
(6)全局捕获错误必须用window.onerror,而这种会捕获稀奇古怪的错误造成系统浪费,不像Promise可以专用window.addEventListener('unhandledrejection',function)

async/await的缺点

(7)try...catch...内部的变量无法传递给下一个try...catch...
(8)无法简单实现Promise的各种原生方法,比如->race()

俩者使用场合

(1)需要使用到Promise各种便捷的方法的时候一定使用Promise
(2)并行的请求最好用Promise
(3)不需要并行的场合,但是要传递参数时,最好用Promise
(4)其他ajax场合,看喜好选择try...catch...还是.catch(),

参考:

https://www.jianshu.com/p/3a37272de675



世界上没有什么偶然,有的只有必然。——壹原侑子
原文地址:https://www.cnblogs.com/liazhimao/p/14913388.html