1.介紹promise和模仿Promise.all和Promise.race promise的設計主要是解決回調地獄(接收結果用回調函數來處理，但必須傳入回調函數)的問題，由一層層嵌套回調函數改為由then來執行。 例如： // callback用於接收返回結果, 非同步方式 fs.readFile( ...
1.介紹promise和模仿Promise.all和Promise.race
promise的設計主要是解決回調地獄(接收結果用回調函數來處理，但必須傳入回調函數)的問題，由一層層嵌套回調函數改為由then來執行。
例如：
// callback用於接收返回結果, 非同步方式
fs.readFile("filePath", callback);
// 還有一種方式
cosnt { promises: fs } = require("fs"); // 用promise包裝fs模塊，已經實現
fs.readFile("filePath").then(callback);// 由上可看出，promise只是解決了回調函數的調用方式，沒有徹底改變回調函數繼續存在的問題。
promise有三個狀態，分別是pending, resolve,reject。只有resolve或者reject被調用，才會結束。
promise對象可以通過new創建, 結果返回後then和catch方法會調用，resolve和reject會走then方法，catch是捕捉未處理異常的方法(比如：500，404之類)。
值得註意的是，then方法的返回值為promise類型，如果在then中繼續執行非同步操作，則可以在then後面再次寫一個then操作。叫做鏈式調用，例如：
Promise.resolve("success")
.then((res) => "非同步操作")
.then((resSecond) => console.log(resSecond)); // resSecond為“非同步操作”
另外可直接調用resolve狀態或者reject狀態，例如Promise.resolve()，或者Promise.reject()方法。這兩個方法直接返回結果，也可以傳入一個Promise對象或者工廠函數。這兩個函數本質都是內部創建了一個Promise對象，調用resolve或者reject。
現如今很多的非同步請求，非同步執行方式，都在向promise靠攏。提供了很多的便利性。比如：axios，上面提到的fs模塊，等等。我用過angular的subscribe，也是對非同步的一種處理方式。但有點不倫不類。
1.1 模擬非同步操作，用於測試
// 模擬非同步請求
const suc = function (time: number) {
return new Promise(resolve => {
setTimeout(() => {
// time秒鐘之後返回結果
resolve("success");
}, time);
})
}
const rej = function (time: number) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// time秒之後拒絕
reject("fail");
}, time);
})
}
// 以上代碼也可合併為一個函數，請讀者自行考慮。
1.2 Promise的all，race方法模擬
PromiseAll方法內內只接受兩個非同步Promise，算是簡化版了(官網api代碼簡介)，能力有限。PromiseRace基本和官網上的差不多。
PromiseRace: 競爭性關係，獲取第一個結果(無論結果resolve或者reject)，立即返回。
PromiseAll_2：感覺使用狀態控制這種不是太好啊
// 準確來說，這個方法有缺陷，只要第一個返回，不管對與不對都返回，應該是所有結果都被reject掉才會返回reject，只有一個正確都要返回正確結果。可結合PromiseAll_2看
function PromiseRace(arrs: Array): Promise<{}> {
if (arrs.length === 0) return Promise.resolve([]);
return new Promise((resolve, reject)=> {
arrs.forEach((pro) => {
Promise.resolve(pro).then(resolve, reject);
});
});
}
// 當所有結果為ture，才會返回ture
function isAllFulfilled(states: Array): boolean {
let res: boolean = true;
states.forEach(state => res = res && state)
return res;
}
// 用一種迴圈的方式迭代每個非同步方法，如果不是函數或對象就直接作為結果返回
function PromiseAll_2(arrs: Array): Promise<{}> {
if (arrs.length === 0) return Promise.resolve([]);
const states: Array = Array.from({length: arrs.length}, (item) => item = false);
return new Promise((resolve, reject)=> {
const result = [];
arrs.forEach((pro, index) => {
// 對輸入做一個封裝，如果是常數或者不是promise的這樣就直接返回
Promise.resolve(pro).then(res => {
states[index] = true;
result[index] = res;
if (isAllFulfilled(states)) resolve(result);
}, err => reject(err));
});
});
}
function PromiseAll(one: Promise, two: Promise): Promise<{}> {
return new Promise((resolve, reject) => {
let twoRes = null;
let oneRes = null;
// 基於兩個非同步互相檢測，官網那個有點看不大明白。各位有什麼好的代碼建議不妨評論說一下
one.then((res) => {
oneRes = res;
if (twoRes) resolve([oneRes, twoRes]);
}, (err) => reject(err));
two.then((res) => {
twoRes = res;
if (oneRes) resolve([oneRes, twoRes]);
}, (err) => reject(err));
});
}
PromiseAll(suc(1000), rej(2000)).then((res) => {
console.log(res);
}).catch((err) => console.log(err));
1.3 小工具。
使用promisify對settimeout做個封裝，單純只是延遲執行
const util = require("util");
// 封裝settimeout延遲執行
const delay = util.promisify(setTimeout); // 用作延遲執行，一般在await的時候用用例：
async function test() {
await delay(1000); // 延遲一秒執行
}
async簡單介紹
async徹底解決了非同步操作回調函數問題。
只需使用await關鍵字，就會等待非同步操作執行完畢才會繼續執行後續代碼。把非同步操作
變為同步操作。
// 代碼
async function test() {
const { data } = await axios.get("http://www.baidu.com"); // { data }為解構賦值
// do something
}
// 不用async
function test() {
axios.get("http://www.baidu.com").then((res) => {
console.log(res.data);
//do something
});
}
// 對比以上結構，async函數的同步會帶來很大的方便，但在載入網頁的時候可能需要等待。
// 如果不希望頁面卡頓，採用非同步還是比較好的。
2. 每周分享
- 前端框架和es的一些變化，這裡面介紹的是前端中最近的一些框架或者基礎性知識。
- nginx的基礎入門，對nginx的一個用法基本介紹。
- 阿裡AI labs研發“智能防騷擾電話技術”，當接聽到騷擾電話時，可以轉到機器人接聽。我試了一下，聽得我一愣一愣的，還以為真的和人工客服聊天。具體想體驗的可以在支付寶搜索天貓精靈。不過這項功能可能會給你帶來困擾，如果你主動掛斷電話，就會立馬改為由智能機器人接聽，如果是你女票打來的，你有事情馬上掛斷，後果不堪設想！好在可以關閉或者打開。玩玩可以，可不要貪杯啊。(>_<)
----
