Promise

最新推荐文章于 2021-10-15 11:46:12 发布

guokanglun

最新推荐文章于 2021-10-15 11:46:12 发布

阅读量141

点赞数

分类专栏： JavaScript基础知识

本文链接：https://blog.csdn.net/gklcsdn/article/details/104617766

版权

JavaScript基础知识专栏收录该内容

59 篇文章 0 订阅

订阅专栏

文章目录

- Promise.race()

1. 概念

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

2. 特点

对象的状态不受外界影响。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。

3. 状态

Promise对象代表一个异步操作，有三种状态：

pending（进行中）、resolved（已成功）和rejected（已失败）。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

4.缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

5.用法

语法

let promise = new Promise(function(resolve,reject){
// resolve 成功后调用
// reject 失败后调用
})

promise.then(res => {

},err => {

})

  let a = 120;
  new Promise((res, rej) => {
      if (a == 10) {
          res('sucsess')
      } else {
          rej('fail')
      }
      // 成功执行then方法，失败执行catch方法
  }).then(data => {
      console.log(data)
  }).catch(err => {
      console.log(err)
  })

当然，可以使用callback，但是callback使用起来是一件很让人绝望的事情。

这时：Promise这个为异步编程而生的对象站了出来…

new Promise((res, rej) => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos/1',
        success(data) {
            res(data)
        },
        error() {
            rej()
        }
    })
}).then(data => {
    console.log(data.title)
    return new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success(data) {
                res(data)

            },
            error() {
                rej()
            }
        })
    })
}).then(data => {
    console.log(data.title)
})

5.2 then方法

promise的then返回值还是一个promise对象,可以连点使用

promise.then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

可以如上使用,then方法里的参数为成功后执行,catch方法里的参数为失败后执行

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

也就是说，状态由实例化时的参数（函数）执行来决定的，根据不同的状态，看看需要走then的第一个参数还是第二个。

resolve()和reject()的参数会传递到对应的回调函数的data或err

then返回的是一个新的Promise实例，也就是说可以继续then

6. 链式操作的用法

所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

new Promise((res, rej) => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos/1',
        success: function (data) {

            // console.log(data)
            res(data);
        },
        error: function () {
            rej()
        }
    })

})
    .then((data) => {
    console.log(data)
    return new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: function (data) {
                res(data)
            },
            error: function () {
                rej()
            }
        })
    })
})
    .then((data) => {
    console.log(data);
    return new Promise((res,rej)=>{
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/posts',
            success: function (data) {
                console.log(data)
            }
        })
    })
})

7. catch()

.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

promise身上有一个catch来捕获错误

promise.catch(err => {
console.log(err);
})

// 其实就是then方法里的第二个参数

var a = 10;
let promise = new Promise(function(resolve,reject){
    // resolve  成功后调用
    // reject   失败后调用
    if(a == 10){
        resolve("成功");
    }else{
        reject("失败");
    }
})
// promise.then(success, fail)
promise.then(res => {
    console.log(res);
},err => {
    console.log(err);
})

// 捕获错误
promise.catch(err => {
    console.log(err);
})

new Promise((res, rej) => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todo/1',
        success: function (data) {

            // console.log(data)
            res(data);
        },
        error: function (err) {
            rej(err)
        }
    })

})
    .then((data) => {
    console.log(data)
    return new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: function (data) {
                res(data)
            },
            error: function () {
                rej()
            }
        })
    })
}).catch(function (err) {
    console.log(err)
})

8. resolve与reject方法

8.1 Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。

const jsPromise = Promise.resolve('123');

上面代码将123转为一个 Promise 对象。

Promise.resolve等价于下面的写法。

Promise.resolve('123')
// 等价于
new Promise(resolve => resolve('123'))

Promise.resolve方法的参数分成四种情况。

参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。
```
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
```
Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
```
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});
```
上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。
参数不是具有then方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。
```
const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello
```
上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve方法的参数，会同时传给回调函数。
不带有任何参数

Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法。
```
const p = Promise.resolve();

p.then(function () {
  // ...
});
```
上面代码的变量p就是一个 Promise 对象。

8.2 Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

   const p = Promise.reject('出错了');
   // 等同于
   const p = new Promise((resolve, reject) => reject('出错了'))
   
   p.then(null, function (s) {
     console.log(s)
   });
   // 出错了

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。

注意，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

   const thenable = {
     then(resolve, reject) {
       reject('出错了');
     }
   };
   
   Promise.reject(thenable)
   .catch(e => {
     console.log(e === thenable)
   })
   // true

上面代码中，Promise.reject方法的参数是一个thenable对象，执行以后，后面catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。

9. Promise.all()

promise的all 方法

all()方法的参数都是promise对象

Promise.all([p1,p2,p3])

把promise打包,扔到一个数组里面,打包完还是一个promise对象

如果是all方法,必须确保,所有的promise对象,都是resolve状态,都是成功的状态,否则就报错

let p1 = Promise.resolve("p1成功");

let p2 = Promise.resolve("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);   // 这里的res是一个有p1,p2,p3里面的resolve组成的数组
   let [res1,res2,res3] = res;
    console.log(res1,res2,res3);
});

// 如果p2是reject
let p1 = Promise.resolve("p1成功");

let p2 = Promise.reject("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);   // 这里的res是一个有p1,p2,p3里面的resolve组成的数组
   let [res1,res2,res3] = res;
    console.log(res1,res2,res3);
});
// 居然报错了

Promise.race()

promise的race的方法

Promise.race([p1,p2,p3])

这个和all用法一样,唯一不同之处就是race方法只要最前面一个resolve就可以正常执行,如果排在前面的是reject就报错

let p1 = Promise.resolve("p1成功");

let p2 = Promise.reject("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.race([p1,p2,p3]).then(res => {
    console.log(res);   // 这里的res是一个有p1里面的第一个resolve值
});

如果全部都是reject

let p1 = Promise.reject("p1成功");

let p2 = Promise.reject("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.race([p1,p2,p3]).then(res => {
    console.log(res);   // 因为第一个是reject,所以报错
});