異步回調

回調地獄

在需要多個操作的時候，會導致多個回調函數嵌套，導致代碼不夠直觀，就是常說的回調地獄

並行結果

如果幾個異步操作之間並沒有前後順序之分,但需要等多個異步操作都完成後才能執行後續的任務，無法實現並行節約時間

Promise

Promise本意是承諾，在程序中的意思就是承諾我過一段時間後會給你一個結果。 什麽時候會用到過一段時間？答案是異步操作，異步是指可能比較長時間才有結果的才做，例如網絡請求、讀取本地文件等

Promise的三種狀態

• Pending Promise對象實例創建時候的初始狀態
• Fulfilled 可以理解為成功的狀態
• Rejected 可以理解為失敗的狀態

  then 方法就是用來指定Promise 對象的狀態改變時確定執行的操作，resolve 時執行第一個函數（onFulfilled），reject 時執行第二個函數（onRejected

構造一個Promise函數

使用promise

let promise = new Promise((resolve, reject) => {
setTimeout(() => {
if(Math.random()>0.5)
resolve(‘This is resolve!‘);
else
reject(‘This is reject!‘);
}, 1000);
});
promise.then(Fulfilled,Rejected)

• 構造一個Promise實例需要給Promise構造函數傳入一個函數。
• 傳入的函數需要有兩個形參，兩個形參都是function類型的參數。
  • 第一個形參運行後會讓Promise實例處於resolve狀態，所以我們一般給第一個形參命名為resolve,使 Promise 對象的狀態改變成成功，同時傳遞一個參數用於後續成功後的操作
  • 第一個形參運行後會讓Promise實例處於reject狀態，所以我們一般給第一個形參命名為reject,將 Promise 對象的狀態改變為失敗，同時將錯誤的信息傳遞到後續錯誤處理的操作

es5模擬Promise

function Promise(fn) {
fn((data)=> {
this.success(data);
}, (error)=> {
this.error();
});
}
 
Promise.prototype.resolve = function (data) {
this.success(data);
}
 
Promise.prototype.reject 
 
= function (error) {
this.error(error);
}
 
Promise.prototype.then = function (success, error) {
this.success = success;
this.error = error;
}

es6模擬Promise

class Promise {
constructor(fn) {
fn((data)=> {
this.success(data);
}, (error)=> {
this.error();
});
}
 
resolve(data) {
this.success(data);
}
 
reject(error) {
this.error(error);
}
 
then(success, error) {
this.success = success;
this.error = error;
console.log(this);
}
}

Primose作為函數的返回值

function ajaxPromise (queryUrl) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘, queryUrl, true);
xhr.send(null);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.responseText);
}
}
}
});
}
 
ajaxPromise(‘http://www.baidu.com‘)
.then((value) => {
console.log(value);
})
.catch((err) => {
console.error(err);
});

Promise的鏈式調用

• 每次調用返回的都是一個新的Promise實例
• 鏈式調用的參數通過返回值傳遞

  then可以使用鏈式調用的寫法原因在於，每一次執行該方法時總是會返回一個Promise對象

  readFile(‘1.txt‘).then(function (data) {
  console.log(data);
  return data;
  }).then(function (data) {
  console.log(data);
  return readFile(data);
  }).then(function (data) {
  console.log(data);
  }).catch(function(err){
  console.log(err);
  });

Promise API

Promise.all

• 參數：接受一個數組，數組內都是Promise實例
• 返回值：返回一個Promise實例，這個Promise實例的狀態轉移取決於參數的Promise實例的狀態變化。當參數中所有的實例都處於resolve狀態時，返回的Promise實例會變為resolve狀態。如果參數中任意一個實例處於reject狀態，返回的Promise實例變為reject狀態。

  Promise.all([p1, p2]).then(function (result) {
  console.log(result); // [ ‘2.txt‘, ‘2‘ ]
  });

不管兩個promise誰先完成，Promise.all 方法會按照數組裏面的順序將結果返回

Promise.race

• 參數：接受一個數組，數組內都是Promise實例
• 返回值：返回一個Promise實例，這個Promise實例的狀態轉移取決於參數的Promise實例的狀態變化。當參數中任何一個實例處於resolve狀態時，返回的Promise實例會變為resolve狀態。如果參數中任意一個實例處於reject狀態，返回的Promise實例變為reject狀態。

  Promise.race([p1, p2]).then(function (result) {
  console.log(result); // [ ‘2.txt‘, ‘2‘ ]
  });

Promise.resolve

返回一個Promise實例，這個實例處於resolve狀態。
根據傳入的參數不同有不同的功能：

• 值(對象、數組、字符串等)：作為resolve傳遞出去的值
• Promise實例：原封不動返回

Promise.reject

返回一個Promise實例，這個實例處於reject狀態。

• 參數一般就是拋出的錯誤信息。

Q

Q是一個在Javascript中實現promise的模塊

q的基本用法

var Q = require(‘q‘);
var fs = require(‘fs‘);
function read(filename) {
var deferred = Q.defer();
fs.readFile(filename,‘utf8‘, function (err, data) {
if(err){
deferred.reject(err);
}else{
deferred.resolve(data);
}
});
return deferred.promise;
}
 
read(‘1.txt1‘).then(function(data){
console.log(data);
},function(error){
console.error(error);
});

q的簡單實現

module.exports = {
defer(){
var _success,_error;
return {
resolve(data){
_success(data);
},
reject(err){
_error(err);
},
promise:{
then(success,error){
_success = success;
_error = error;
}
}
}
}
}

q的實現

var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
if (pending) {
value = _value;
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
callback(value);
}
pending = undefined;
}
},
promise: {
then: function (callback) {
if (pending) {
pending.push(callback);
} else {
callback(value);
}
}
}
};
};

var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
if (pending) {
value = _value;
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
callback(value);
}
pending = undefined;
}
},
promise: {
then: function (callback) {
if (pending) {
pending.push(callback);
} else {
callback(value);
}
}
}
};
};

bluebird

實現 promise 標準的庫是功能最全，速度最快的一個庫

bluebird經典使用

var Promise = require(‘./bluebird‘);
 
var readFile = Promise.promisify(require("fs").readFile);
readFile("1.txt", "utf8").then(function(contents) {
console.log(contents);
})
 
var fs = Promise.promisifyAll(require("fs"));
 
fs.readFileAsync("1.txt", "utf8").then(function (contents) {
console.log(contents);
})

bluebird簡單實現

module.exports = {
promisify(fn){
return function () {
var args = Array.from(arguments);
return new Promise(function (resolve, reject) {
fn.apply(null, args.concat(function (err) {
if (err) {
reject(err);
} else {
resolve(arguments[1])
}
}));
})
}
},
promisifyAll(obj){
for(var attr in obj){
if(obj.hasOwnProperty(attr) && typeof obj[attr] ==‘function‘){
obj[attr+‘Async‘] = this.promisify(obj[attr]);
}
}
return obj;
}
}

動畫

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>move</title>
<style>
.square{
width:40px;
height:40px;
border-radius: 50%;
}
.square1{
background-color: red;
}
.square2{
background-color: yellow;
}
.square3{
background-color: blue;
}
</style>
</head>
<body>
<div class="square square1" style="margin-left: 0"></div>
<div class="square square2" style="margin-left: 0"></div>
<div class="square square3" style="margin-left: 0"></div>
</body>
<script>
var square1 = document.querySelector(‘.square1‘);
var square2 = document.querySelector(‘.square2‘);
var square3 = document.querySelector(‘.square3‘);
 
/*function move(element,target,resolve){
let timer = setInterval(function(){
var marginLeft = parseInt(element.style.marginLeft, 10);
if(marginLeft == target){
resolve();
}else{
element.style.marginLeft = ++marginLeft+‘px‘;
}
},13);
}*/
function move(element,target,resolve){
let current = 0;
let timer = setInterval(function(){
element.style.transform=`translateX(${++current}px)`;
if(current>target){
clearInterval(timer);
resolve();
};
},13);
}
function animate(element,target){
return new Promise(function(resolve,reject){
move(element,target,resolve);
});
}
animate(square1,100)
.then(function(){
return animate(square2,100);
})
.then(function(){
return animate(square3,100);
});
</script>
</html>

co

co初體驗

let fs = require(‘fs‘);
function getNumber(){
return new Promise(function (resolve,reject) {
setTimeout(function(){
let number = Math.random();
if(number >.5){
resolve(number);
}else{
reject(‘數字太小‘);
}
},1000);
});
}
function *read(){
let a = yield getNumber();
console.log(a);
let b = yield ‘b‘;
console.log(b);
let c = yield getNumber();
console.log(c);
}
 
function co(gen){
return new Promise(function(resolve,reject){
let g = gen();
function next(lastValue){
let {done,value} = g.next(lastValue);
if(done){
resolve(lastValue);
}else{
if(value instanceof Promise){
value.then(next,function(val){
reject(val);
});
}else{
next(value);
}
}
}
next();
});
}
co(read).then(function(data){
console.log(data);
},function(reason){
console.log(reason);
});

co連續讀文件

let fs = require(‘fs‘);
function readFile(filename){
return new Promise(function (resolve,reject) {
fs.readFile(filename,‘utf8‘,function(err,data){
if(err)
reject(err);
else
resolve(data);
})
});
}
function *read(){
let a = yield readFile(‘./1.txt‘);
console.log(a);
let b = yield readFile(‘./2.txt‘);
console.log(b);
}
 
function co(gen){
let g = gen();
function next(val){
let {done,value} = g.next(val);
if(!done){
value.then(next);
}
}
next();
}

Promise/A+完整實現

function Promise(executor) {
let self = this;
self.status = "pending";
self.value = undefined;
self.onResolvedCallbacks = [];
self.onRejectedCallbacks = [];
function resolve(value) {
if (value instanceof Promise) {
return value.then(resolve, reject)
}
setTimeout(function () { // 異步執行所有的回調函數
if (self.status == ‘pending‘) {
self.value = value;
self.status = ‘resolved‘;
self.onResolvedCallbacks.forEach(item => item(value));
}
});
 
}
 
function reject(value) {
setTimeout(function () {
if (self.status == ‘pending‘) {
self.value = value;
self.status = ‘rejected‘;
self.onRejectedCallbacks.forEach(item => item(value));
}
});
}
 
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError(‘循環引用‘));
}
let then, called;
 
if (x != null && ((typeof x == ‘object‘ || typeof x == ‘function‘))) {
try {
then = x.then;
if (typeof then == ‘function‘) {
then.call(x, function (y) {
if (called)return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, function (r) {
if (called)return;
called = true;
reject(r);
});
} else {
resolve(x);
}
} catch (e) {
if (called)return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
Promise.prototype.then = function (onFulfilled, onRejected) {
let self = this;
onFulfilled = typeof onFulfilled == ‘function‘ ? onFulfilled : function (value) {
return value
};
onRejected = typeof onRejected == ‘function‘ ? onRejected : function (value) {
throw value
};
let promise2;
if (self.status == ‘resolved‘) {
promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try {
let x = onFulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
 
});
}
if (self.status == ‘rejected‘) {
promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try {
let x = onRejected(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
if (self.status == ‘pending‘) {
promise2 = new Promise(function (resolve, reject) {
self.onResolvedCallbacks.push(function (value) {
try {
let x = onFulfilled(value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
self.onRejectedCallbacks.push(function (value) {
try {
let x = onRejected(value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
return promise2;
}
Promise.prototype.catch = function (onRejected) {
return this.then(null, onRejected);
}
Promise.all = function (promises) {
return new Promise(function (resolve, reject) {
let result = [];
let count = 0;
for (let i = 0; i < promises.length; i++) {
promises[i].then(function (data) {
result[i] = data;
if (++count == promises.length) {
resolve(result);
}
}, function (err) {
reject(err);
});
}
});
}
 
Promise.deferred = Promise.defer = function () {
var defer = {};
defer.promise = new Promise(function (resolve, reject) {
defer.resolve = resolve;
defer.reject = reject;
})
return defer;
}
/**
* npm i -g promises-aplus-tests
* promises-aplus-tests Promise.js
*/
try {
module.exports = Promise
} catch (e) {
}

資源

bluebirdAPI
javascript Promise迷你書
Promise/A+規範
Promise/A+

關於Promise詳解