promise简单理解

本文详细介绍了Promise的概念,如何解决异步操作中的常见问题,如回调地狱、错误处理等。通过示例展示了Promise的使用,包括链式调用、Promise队列以及Promise.all()和Promise.race()的用法。同时,文章还提及了async/await的错误处理策略。
摘要由CSDN通过智能技术生成

1、什么是promise

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
Promise 提供统一的API ,各种异步操作都可以用同样的方法进行处理,让开发者不用关注于时序和底层的结果。
Promise 的状态具有不受外界影响和不可逆两个特点。

2.Promise是如何解决异步操作

1)调用回调过早
对于Promise 来说,即使是立即完成的 Promise 也无法被同步观察到,
也就是说一个Promise调用 then() 的时候,
即使这个 Promise 已经决议了,提供给 then的回调也总会被异步调用。

2)调用回调过晚(或没有被调用)
对于一个 Promise 对象注册每一个观察回调都是相对独立、互不干预的。
而 Promise 对象调用 resolve()reject() 时,每个注册的观察回调也都会被自动调用。
所以这些观察回调的任意一个都无法影响或延误对其他回调的调用。
此外,关于回调未调用,正常情况下,没有任何东西可以阻止 Promise 想你通知它的决议,
即使你的 js代码报错了,一会通过异常回调来获取到。如果Promise 永远不被决议的话,
 Promise 本身已提供了竞态的抽象机制来作为解决方案

3)调用回调次数过少或过多
promise 的定义方式使得它只能被决议一次。
即使代码中出现多次决议,这个 Promise 也会接受第一次决议,并会忽略掉其他任何后续调用
。所以任何通过 then() 注册的回调只会被调用一次

4)未能传递所需的环境和参数
凡是被决议的值,都会被传递到观察回调中,如果没有显示的决议也会传递一个 undefined 给观察回调。
需要主要的是,Promise 只允许传一个决意值,其他值会被默默忽略掉

5)吞掉可能出现的错误和异常
如果在创建 Promise 时,存在 JS 代码错误,会直接导致该 Promise 的拒绝决议,
那么你可以通过 reject() 来获取异常,代码中的任何异常都不会吞掉。

3.具体使用

text1(){
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          resolve(接口请求函数);//返回写函数里面你要执行的内容
        },3000)
      })
    },
text2(){
        console.log('22222222222')
    },
调用
timeFN(){
       this.text1().then(() => {
           this.text2()
       })
    },

另一个场景
有a、b、c三个异步任务,要求必须先执行a,再执行b,最后执行c
模拟三个异步

// 异步函数a
var a = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('a')
    }, 1000)
  })
}

// 异步函数b
var b = function (data) {
  return new Promise(function (resolve, reject) {
    resolve(data + 'b')
  })
}

// 异步函数c
var c = function (data) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(data + 'c')
    }, 500)
  })
}

方法一

//链式调用(不常用)
a()
  .then(function (data) {
    return b(data)
  })
  .then(function (data) {
    return c(data)
  })
  .then(function (data) {
    console.log(data)// abc
  })

方法二

// 构建队列
function queue(arr) {
  var sequence = Promise.resolve()
  arr.forEach(function (item) {
    sequence = sequence.then(item)
  })
  return sequence
}

// 执行队列
queue([a, b, c])
  .then(data => {
    console.log(data)// abc
  })

方法三

async function queue(arr) {
  let res = null
  for (let promise of arr) {
    res = await promise(res)
  }
  return await res
}
queue([a, b, c])
  .then(data => {
    console.log(data)// abc
  })

Promise.all() 批量执行

Promise.all([p1, p2, p3])用于将多个promise实例,包装成一个新的Promise实例,
返回的实例就是普通的promise
它接收一个数组作为参数
数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变
当所有的子Promise都完成,该Promise完成,返回值是全部值得数组
有任何一个失败,该Promise失败,返回值是第一个失败的子Promise结果

Promise.race() 类似于Promise.all() ,区别在于它有任意一个完成就算完成

关于async await
await对于失败消息的处理:
await只关心异步过程成功的消息resolve(data),
拿到相应的数据data,至于失败消息reject(error),
不关心不处理;对于错误的处理有以下几种方法供选择:
(1)让await后面的Promise对象自己catch;
(2)也可以让外面的async函数返回的Promise对象统一catch;
(3)像同步代码一样,放在一个try…catch结构中;

async componentDidMount() {
    // 将异步和同步的代码放在一个try..catch中,异常都能抓到
    try {
        let array = null;
        let data = await asyncFunction();  // 这里用await关键字,就能拿到结果值;否则,没有await的话,只能拿到Promise对象
        if (array.length > 0) {  // 这里会抛出异常,下面的catch也能抓到
            array.push(data);
        }
    } catch (error) {
        alert(JSON.stringify(error))
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值