title: Promise
date: 2014-12-22 12:39:04
categories: [技术]
tags: [CSS, javascript]

comments: true

[TOC]

创建promise对象

  1. new Promise(fn) 返回一个promise对象
  2. fn 中指定异步等处理
    • 处理结果正常的话,调用resolve(处理结果值)
    • 处理结果错误的话,调用reject(Error对象)

按照这个步骤,我们通过Promise异步处理来获取XMLHttpRequest(XHR)的数据。

首先,创建一个用Promise把XHR处理包装起来的名为 getURL 的函数。

xhr-promise.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function getURL(URL{
    return new Promise(function (resolve, reject{
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function ({
// 结果状态为200时才会调用 `resolve`其他情况(取得失败)时则会调用 `reject` 方法。
            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 = "https://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
    console.log(value);
}).catch(function onRejected(error){
    console.error(error);
});
// {
//   "args": {}, 
//   "headers": {
//     "Accept": "*/*", 
//     "Accept-Encoding": "gzip, deflate, sdch, br", 
//     "Accept-Language": "zh-CN,zh;q=0.8,en;q=0.6", 
//     "Host": "httpbin.org", 
//     "Origin": "http://httpbin.org", 
//     "Referer": "http://httpbin.org/", 
//     "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
//   },
//   "origin": "47.89.21.28", 
//   "url": "https://httpbin.org/get"
// }

promise对象返回状态主要包含两种

  • promise对象被 resolve 时的处理(onFulfilled)
  • promise对象被 reject 时的处理(onRejected)

promise value flow

resolve后的处理,可以在.then方法中传入想要调用的函数,如xhr-promise.js第21行。
reject后的处理,可以在.then的第二个参数或者是在.catch方法中设置想要调用的函数,其实 .catch的别名而已, 也就是说如下两种处理都是相同的:

1
2
3
getURL(URL).then(onFulfilled, onRejected);
getURL(URL).then(onFulfilled).catch(onRejected);

目前推荐的实践是使用.catch将resolve和reject分开处理,后续详细介绍。

Promise.resolve

new Promise的快捷方式

创建promise对象一般我们使用new Promise(),但是除此之外我们还可以使用Promise.resolvePromise.reject创建promise对象。

1
2
3
4
5
Promise.resolve(42).then(function(value){
    console.log(value);
});
// 42

这里Promise.resolve(value);的返回值是一个Promise对象,所以可以对其返回值调用.then。而Promise.resolve(value);可以认为是下面代码的语法糖。

1
2
3
4
5
Promise.resolve(value)
new Promise(function(resolve){
    resolve(value);
});

thenable 对象转换为promise对象

Promise.resolve的另外一个方法是将 thenable 对象转换成promise对象。

thenable 值类Promise对象,拥有名为.then方法的对象。这跟类数组的概念类似——有length属性,且它的属性值为number类型。

举个栗子,jQuery

经不住似水流年  逃不过此间少年
0%