Promise 学习

目录

什么是 Promise ？

 为什么要用 Promise ？

创建 Promise

一个简单的例子

Promise 的基本用法 

---

什么是 Promise ？

MDN 上的解释：

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

 为什么要用 Promise ？

在 promise 出现之前，可以使用异步回调来进行异步操作：

setTimeout(function() {
    console.log('taskA, asynchronous');
}, 0);
console.log('taskB, synchronize');
//while(true);

-------output-------
taskB, synchronize
taskA, asynchronous

注意：定时器延时的时间为0，taskA还是晚于taskB执行。这是由于定时器是异步的，异步任务会在当前脚本的所有同步任务执行完才会执行。这时，如果同步代码中含有死循环，那么这个异步任务就不会执行，因为同步任务阻塞了进程。

Promise 对象也是用于异步操作的，那它有什么优势呢？

Promise 的真正强大之处在于它的多重链式调用，可以避免层层嵌套回调。利用 then 进行「链式回调」，将异步操作以同步操作的流程表示出来。

例如：

sendRequest('...', '').then(function(data1) {
    console.log('第一次请求成功, 这是返回的数据:', data1);
    return sendRequest('test2.html', data1);
}).then(function(data2) {
    console.log('第二次请求成功, 这是返回的数据:', data2);
    return sendRequest('test3.html', data2);
}).then(function(data3) {
    console.log('第三次请求成功, 这是返回的数据:', data3);
}).catch(function(error) {
    //用catch捕捉前面的错误
    console.log('sorry, 请求失败了, 这是失败信息:', error);
});

创建 Promise

const myFirstPromise = new Promise((resolve, reject) => {
  // 做一些异步操作，最终会调用下面两者之一:
  //
  //   resolve(someValue); // fulfilled
  // 或
  //   reject("failure reason"); // rejected
});

若想让某个函数拥有 Promise 功能，只需要让其返回一个 Promise 即可：

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};

一个简单的例子

var promise1 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve('foo');
  },3000);
});

promise1.then(function(value){   // 这个value就是resolve函数的参数
  console.log(value);
});

console.log(promise1);

----output----

[object Promise]

"foo"

Promise 的基本用法 

一个 Promise 有以下几种状态:

• pending: 初始状态，既不是成功，也不是失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

 Promise 状态的变化有且仅有两种：一是由 pending 变为 fulfilled；二是由 pending 变为 rejected。

当其中任一种情况出现时，Promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用。

注意：Promise 一旦新建就会立即执行，无法取消。这也是它的缺点之一。

Promise 接受一个「函数」作为参数，该函数的两个参数分别是 resolve 和 reject 。这两个函数就是就是「回调函数」，由JavaScript引擎提供。

const test = new Promise(function(resolve,reject){
    if(...){
        resolve(...); //异步操作成功
    }else{
        reject(error);    //异步操作失败
    }
});

resolve 函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去； 
reject 函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

test.then(function(data){
    ...// data是resolve函数中传入的参数，表示异步操作成功的数据
},function(error){
    ...// 这第二个回调函数不是必须的
});

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

 then 方法中指定的回调函数，将在当前脚本所有同步任务执行完毕之后才会执行。而 Promise 在创建完成后立即执行。