前端笔记(Promise和XHR)

2017-11-26

Promise的几种状态

Fulfilled: Resolved. It worked.
Rejected: It didn’t work :(
pending: still waiting
settled: something happended!

简单例子

function wait(ms) {
    var promise = new Promise(
        function (resolve) {
        	console.log(this);
        	window.setTimeout(function () {
        		resolve();
        	}, ms);
     }) ;
     return promise;
};

var milliseconds = 2000;
wait(milliseconds).then(finish);

// This is just here to help you test.
function finish() {
	var completion = document.querySelector('.completion');
	completion.innerHTML = "Complete after " + milliseconds + "ms.";
};

链接Promise

1	get('example.json').then(resolveFunc).catch(rejectFunc);

等价于

1	get('example.json').then(resolveFunc).then(undefined, rejectFunc);

异常出现顺序

总是下一个thenable的rejectFunc被调用

序列和并行请求

注意进行promise请求的顺序，同时进行多个数据请求并不会按照请求的先后次序返回数据。

//程序将串行执行
getJSON("xxxx.json").then(function(response){
    var sequence = Promise.resolve();
    response.results.forEach(function(url){
        sequence = sequence.then(function(){
            return getJSON(url);
        })
        .then(createThumb);
    })
}).catch(function(e){console.log(e)});

//程序将并行执行
getJSON("xxxx.json").then(function(response){
    var sequence = Promise.resolve();
    response.results.forEach(function(url){
        sequence.then(function(){
            return getJSON(url);
        })
        .then(createThumb);
    })
}).catch(function(e){console.log(e)});

具有.map的promise

//程序将并行执行,但.map不能保证顺序
getJSON("xxxx.json").then(function(response){
    response.results.map(function(url){
        getJSON(url).then(createThumb);
    })
}).catch(function(e){console.log(e)});

Promise的.all

.all需要一个Promise数组来执行这些Promise

Promise.all(arrayOfPromise)
        .then(function(arrayOfValues){
            ...
        })

如果在执行.all过程中有一个Promise失败，则.all会立刻失效不用等候解决其他Promise

getJSON("xxxx.json").then(function(response){
    //var arrayOfPromise = response.results.map(function(url){getJSON(url)});
        //var arrayOfPromise = response.results.map(getJSON);
   // return Promise.all(arrayOfPromise);
   return Promise.all(response.results.map(getJSON));
}).then(function(arrayOfValues){
            arrayOfValues.forEach(function(data){
                createThumb(data);
            });
        })
.catch(function(e){console.log(e)});

XHR 用法回顾

你需要完成多个步骤，才能在 JavaScript 中发出异步 HTTP 请求。

要发出异步请求
使用 XMLHttpRequest 构造函数创建 XHR 对象

使用 .open() 方法 - 设置 HTTP 方法和要获取的资源的 URL

设置 .onload 属性 - 将此属性设为成功获取数据后将运行的函数

设置 .onerror 属性 - 将此属性设为出现错误后将运行的函数

使用 .send() 方法 - 发送请求

要使用响应
使用 .responseText 属性 - 存储异步请求响应的文本
注意：原始 XHR 规范创建于 2006 年。这是第一版规范。多年后，该规范出现了小小的改动。

在 2012 年，第二版 XHR 规范开始得以创建。在 2014 年，XHR2 规范与 XHR1 规范进行合并，这样就不存在有分歧的标准。依然有一些 XHR2 参考，但是 XHR 规范现在完全包含 XHR2。

请参阅这篇 HTML5Rocks 文章，了解现在包含在 XHR 规范中的 XHR2 中的新技巧。

阅读数: