Promise简单介绍与基本使用｜青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第14天

Promise

何为Promise

Promise是ES6的新特性。

传统的使用回调函数的方式：

getAsync("fileA.txt", function(error, result){
   if(error){// 取得失败时的处理
       throw error;
  }
   // 取得成功时的处理
});
//Node规定在回调函数中的第一个参数为`error` ，第二个参数为`result` .

使用Promise 后：

var promise = getAsyncPromise("fileA.txt"); 
promise.then(function(result){
   // 获取文件内容成功时的处理
}).catch(function(error){
   // 获取文件内容失败时的处理
});

简介

Promise 主要有三种API：

• Constructor

  使用构造函数Promise()来创建一个新的对象

  var a = new Promise(function(resolve,reject){
   
  });
  

• Instance Method

  创建对象时，为了设置成功/失败时调用的回调函数，使用then方法a.then(onFullfilled,onRehected)

  • resolve(成功)时

    onFullfilled会被调用

  • reject （失败）时

    onRejected会被调用

  • 只想处理异常情况，可以使用catch

    promise.carch(onRejected)

• Static Method

  Promise 作为全局对象，具有的静态方法

  • promise.all
  • promise.resolve

编写代码

示例

function getURL(URL) {
   return new Promise(function (resolve, reject) {
       var req = new XMLHttpRequest();
       req.open('GET', URL, true);
       req.onload = function () {
           if (req.status === 200) {  //状态码为200时调用resolve函数，并且将res.responseText作为参数传入
               resolve(req.responseText);
          } else {
             //发生错误时调用reject函数，在其中创建了一个Error对象，并且将错误信息作为参数传入
               reject(new Error(req.statusText));
          }
      };
       req.onerror = function () {
           reject(new Error(req.statusText));
      };
       req.send();
  });
}
// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
   console.log(value);
}).catch(function onRejected(error){
   console.error(error);
});

处理方法

实例方法有两种：成功后调用的方法，失败后调用的方法。

onFullfilled:在Promise中 调用resolve 后，将Promise 对象变为resolve状态，同时用它的值调用该函数。

onRejected:发生错误后，调用reject，可以在.then 第二个参数或者.catch 方法中设置想要调用的函数

Promise实战

创建Promise对象

0. new Promise() 创建一个promise 对象

1. 在fn 中指定异步处理

   0. 处理结果正常则调用resolve(处理结果值)
   1. 处理结果失败则调用reject(Error对象)

接下来，我们来通过异步处理的方式获取XHR的数据。

创建XHR的Promise对象

function getURL(URL) {
   return new Promise(function (resolve, reject) {
       var req = new XMLHttpRequest();
       req.open('GET', URL, true);
       req.onload = function () {
           if (req.status === 200) {
               resolve(req.responseText); 
          } else {
               reject(new Error(req.statusText));
          }
      };
       req.onerror = function () {
           reject(new Error(req.statusText));
      };
       req.send();
  });
}
// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
   console.log(value);
}).catch(function onRejected(error){
   console.error(error);
});

创建处理方法

刚才创建的返回Promise 的函数：

getURL("http://example.com/");

该函数在执行resolve(req.responseText)时，将peomise变为resolve(Fulfilled)状态，同时调用onFulfilled函数。

同样的，发生错误的话，promise变为Rejected状态，同时调用.then后的第二个参数或者是在.catch 方法中设置想要调用的函数。