小白学 VUE 系列之JavaScript Promise 对象

什么是 Promise 对象

  • Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。
  • 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
  • 以在对象之间传递和操作promise,帮助我们处理队列

为什么要用 Promise 呢

异步回调操作,不小心就容易回调陷阱,一直的再回调后面写回调参数。
比如A请求之后拿到数据,再请求B,B拿到数据之后请求C,C拿到数据之后请求D,那么就会有个嵌套的无线下去,维护代码有点深,这样不利于我们维护。于是 Promise 来解决回调嵌套问题。
描述
Promise 之后链式操作,这样我们类似代码上到下顺序走下去。
描述

Promise 使用

创建

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
        resolve('ok')
});

CS6写法

var promise = new Promise((resolve, reject) =>{
    处理结束后、调用resolve 或 reject
});
ar myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时,我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中,我们使用setTimeout(...)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行!
    }, 250);
});

myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型,这里只是举个例子
    document.write("Yay! " + successMessage);
});

调用

promise.then(onFulfilled, onRejected)
promise.then(onFulfilled).catch(onRejected)

链式操作

Promise.prototype.then 方法返回的是一个新的 Promise 对象,因此可以采用链式写法。

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'
  })
var aa2 = new Promise((resolve, reject)=>{
    resolve("成功!2"); //代码正常执行!
    // 处理结束后、调用resolve 或 reject
});
aa2.then(res=>{
    console.log(res);//成功
    return "下一个";
    }).then(res2=>{
        console.log('res2',res2);//下一个
        return "下一个-下一个"}
    ).then(res4=>{
        console.log('res4',res4)//下一个-下一个
    })

捕捉错误

Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名,用于指定发生错误时的回调函数。
Promise 对象的错误具有"冒泡"性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个 catch 语句捕获

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。