前言
我最近发现我一用Promise无法直接写出来要看文档，所以总结了个题巩固一下。以后忘记了回来直接看这里例子立马就能写了，很稳。
题目一(基本promise)
使用promise实现:
开始的时候console.log('start')
等待3秒后console.log('first step finished')
之后用ajax对www.baidu.com发出get请求，
请求返回后结果给下个promise
console.log输出结果
题目实现
var stepone = function() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('shit')
resolve()
}, 3000)
})
}
var steptwo = function() {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200) {
resolve(xhr.responseText)
} else if(xhr.readyState==4 && xhr.status / 100 == 4) {
reject(xhr.responseText)
}
}
xhr.open("GET","www.baidu.com",true);
xhr.send();
})
}
var stepthree = function(data) {
return new Promise((resolve, reject) => {
console.log(data);
})
}
stepone()
.then(steptwo)
.then(stepthree);
题目二(promise.all和promise.race)
有些情况我们需要使用all或者race，一些比较典型的例子是如下
all: 有些情况下，你需要等两个异步请求都完成之后才做某些操作，比如一个包含了文章内容和评论的页面，需求是你开始加载的时候载入loading画面，当内容和评论都加载完之后结束loading。这种情况就是用all了。
race: 有一些情况下，你只获取返回最快的异步请求的数据(注意，其他的依旧会执行完)，比如如果我对一个图片进行请求，那如果我过5秒之后还没有接到返回我可能会想要做一些操作。
all
var getPromise = (value, delay) => {
return new Promise(resolve => {
setTimeout(() => resolve(value), delay);
});
};
var promise1 = getPromise('value-1', 350);
var promise2 = getPromise('value-2', 250);
var promise3 = getPromise('value-3', 150);
var promise = Promise.all([promise1, promise2, promise3]);
promise
.then(result => {
console.log('result of promise:', result);
})
.catch(error => {
console.log('error', error);
});
race
以请求一个无法加载的图片为例子
//请求某个图片资源
function requestImg(){
var p = new Promise(function(resolve, reject){
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = 'xxxxxx';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise
.race([requestImg(), timeout()])
.then(function(results){
console.log(results);
})
.catch(function(reason){
console.log(reason);
});
