2. 程式人生 > >Promise原理講解 async+await應用（非同步回撥解決方案）

Promise原理講解 async+await應用（非同步回撥解決方案）

阿新 • • 發佈：2018-12-14

1.非同步程式設計

在JavaScript的世界中，所有程式碼都是單線執行的。 由於這個“缺陷”，導致JavaScript的所有網路操作，瀏覽器事件，都必須是非同步執行。非同步執行可以用:

  • 回撥函式
  • 釋出訂閱
  • 觀察者模式
  • promise
1.1.回撥函式
function call(id, callback){
  return function(){
     callback(id+1);
  }
}
let fn = call(3, function(id){
  console.log(id);
})
fn();

lodash 裡面的after函式實現方法

function after(times, callback){
  return function(){
    //次數一直減少
    if(--times == 0){
      callback();
    }
  }
}
let fn = after(3, function(){
  console.log('after 被呼叫了三次');
})
fn();
fn();
fn();

接下來就是常見的讀取資料的問題，回撥函式的話，我們只能一層一層往下讀取，很容易就進入了回撥地獄這個可怕的狀態

let fs = require('fs');
let school = {}
fs.readFile('./age.txt', 'utf8', function (err, data) {
    school['name'] = data;
    fs.readFile('./name.txt', 'utf8', function (err, data) {
      school['age'] = data;//{ name: 'cjw', age: '18' }
    });
});
1.2 釋出訂閱

釋出者和訂閱者是沒有依賴關係的 你可能對釋出訂閱有點陌生，其實只要在DOM節點上面繫結過事件函式，那就使用過釋出—訂閱模式。

document.body.addEventListener('click',function(){
  alert(2);
},false);
document.body.click();    //模擬使用者點選

實現原理 首先用一個數組arr儲存回撥函式，然後觸發emit的時候，arr裡面的回撥函式一一執行

let fs = require('fs');

let dep = {
    arr: [],//儲存回撥函式
    on(callback){
        this.arr.push(callback);
    },
    emit(){
        this.arr.forEach(item=>{
            item();
        })
    }
}

let school = {};
//這裡先加一個回撥函式 (訂閱)
dep.on(function(){
    if(Object.keys(school).length === 2){
        console.log(school);//{ name: 'cjw', age: '18' }
    }
})
//
fs.readFile('./age.txt', 'utf8', function(err, data){
    school['name'] = data;
    dep.emit();//釋出,呼叫dep.arr 裡面的回撥函式一一執行
})
fs.readFile('./name.txt', 'utf8', function(err, data){
    school['age'] = data;
    dep.emit();//釋出
})
1.3 觀察者模式

觀察者模式 釋出和訂閱的 被觀察者是依賴於觀察者的

//觀察者
class Observer{
    constructor(){
        this.arr = [];
        this.val = 1;
    }
    updateVal(val){
        this.val = val;
        this.notify();
    }
    notify(){
        this.arr.forEach(s=>s.update());
    }
    save(s){//儲存一個物件
        this.arr.push(s);
    }
}
// 被觀察者，被觀察者有一個更新的方法。
class Subject{
    update(){
        console.log('update')
    }
}
let s = new Subject();
let observer = new Observer();
observer.save(s);//儲存一個物件
observer.save(s);
observer.updateVal(21);//更新值的時候，被觀察者也執行一個更新的方法
1.4 Promise

promise有以下兩個特點: 1.物件的狀態不受外界影響。Promise物件代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。 2.一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise物件的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected

let fs = require('fs');
function read(url){
    return new Promise((resolve, reject)=>{
        fs.readFile(url, 'utf8', (err, data)=>{
            if(err) reject(err);
            resolve(data);
        })
    })
}
let school = {};
read('./name.txt').then(data=>{
    school['name'] = data;
    return read('age.txt');
}).then(data=>{
    school['age'] = data;
    console.log(school);//{ name: 'cjw', age: '18' }
})

2.promise用法與原理

2.1 Promise.prototype.then()

Promise 例項具有then方法，也就是說，then方法是定義在原型物件

//let Promise = require('./promise.js');
let p = new Promise((resolve, reject)=>{
    setTimeout(function(){     
        reject('成功');
    },100)
    reject('3');
})
p.then((value)=>{
    console.log(value);//3,這裡是3因為，只能從一個狀態panding到另一個狀態
}, (reason)=>{
    console.log(reason);
})

基本概念

1.new Promise時需要傳遞一個executor執行器,執行器會立刻執行 2.執行器中傳遞了兩個引數 resolve成功的函式 他呼叫時可以傳一個值 值可以是任何值 reject失敗的函式 他呼叫時可以傳一個值 值可以是任何值 3.只能從pending態轉到成功或者失敗 4.promise例項。每個例項都有一個then方法，這個方法傳遞兩個引數，一個是成功另一個是失敗 5.如果呼叫then時 發現已經成功了會讓成功函式執行並且把成功的內容當作引數傳遞到函式中 6.promise 中可以同一個例項then多次,如果狀態是pengding需要將函式存放起來 等待狀態確定後 在依次將對應的函式執行 (釋出訂閱) 7.如果類執行時出現了異常 那就變成失敗態

Promise.prototype.then()的實現

function Promise(executor){
    var self = this;
    self.status = 'pending';//從pending 轉換為resolved rejected
    self.value = undefined;
    self.reason = undefined;
    self.onResolved = [];//專門存放成功的回撥
    self.onRejected = [];//專門存放失敗的回撥
    //pending -> resolved
    function resolve(value){
        if(self.status === 'pending'){
            self.value = value;
            self.status = 'resolved';
            self.onResolved.forEach(fn=>fn());
        }
    }
     //pending -> rejected
    function reject(reason){
        if(self.status === 'pending'){
            self.reason = reason;
            self.status = 'rejected';
            self.onRejected.forEach(fn=>fn());
        }
    }
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
}
//then方法的實現
Promise.prototype.then = function(onfulfilled, onrejected){
   let self = this;
   if(self.status === 'resolved'){//判斷狀態，resolved時候，返回value
       onfulfilled(self.value);
   }
   if(self.status === 'rejected'){//判斷狀態，rejected時候，返回reason
       onrejected(self.reason);
   }

   if(self.status === 'pending'){
      self.onResolved.push(function(){
          onfulfilled(self.value);
      })
      self.onRejected.push(function(){
        onfulfilled(self.reason);
      })
   }
}
module.exports = Promise;
2.2 Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回撥函式。

let p = new Promise((resolve, reject)=>{
    resolve();
})
p.then(data=>{
    throw new Error();
}).then(null).catch(err=>{
    console.log('catch', err)
}).then(null, err=>{
    console.log('err', err);
})

實現原理

Promise.prototype.catch = function(onrejected){
    return this.then(null, onrejected);
}
2.3 Promise.all

Promise.all方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項。

const p = Promise.all([p1, p2, p3]);

實現原理

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let results = []; let i = 0;
        function processData(index, data) {
        results[index] = data; // let arr = []  arr[2] = 100
        if (++i === promises.length) {
            resolve(results);
        }
        }
        for (let i = 0; i < promises.length; i++) {
        let p = promises[i];
        p.then((data) => { // 成功後把結果和當前索引 關聯起來
            processData(i, data);
        }, reject);
        }
    })
}
2.4 Promise.race

Promise.race方法同樣是將多個 Promise 例項，包裝成一個新的 Promise 例項。

const p = Promise.race([p1, p2, p3]);

上面程式碼中，只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變。那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式。

let Promise = require('./e2.promise');
let fs = require('mz/fs');

Promise.race([
    fs.readFile('./age.txt', 'utf8'),
    fs.readFile('./name.txt', 'utf8')
]).then(data=>{
    console.log(data);
})

實現原理

Promise.race = function(promises){
    return new Promise((resolve, reject)=>{
        for(let i=0; i< promises.length; i++){
            let p = promises[i];
            p.then(resolve, reject);
        }
    })
}
2.5 Promise.resolve

Promise.resolve方法允許呼叫時不帶引數，直接返回一個resolved狀態的 Promise 物件。

const p = Promise.resolve();

p.then(function () {
  // ...
});

實現原理

Promise.resolve = function(value){
    return new Promise((resolve, reject)=>{
        resolve(value);
    })
}
2.6 Promise.reject

Promise.reject方法允許呼叫時不帶引數，直接返回一個rejected狀態的 Promise 物件。

const p = Promise.reject();

p.then(function () {
  // ...
});

實現原理

Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    })
}
2.7 promise的一些擴充套件庫

mz

2.8 應用 async + await = generator + co

generator 生產迭代器的 生成器函式 * generator 一般配合 yield

function * read() {
    yield 1;
    yield 2;
    yield 3;
    return 100
}
let it = read();
console.dir(it.next());
console.dir(it.next());
console.dir(it.next());
console.dir(it.next());
//結果：
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 100, done: true }

promise + generator

let fs = require('mz/fs');
// let co = require('co');

function * read(){
    let age = yield fs.readFile('./age.txt', 'utf8');
    return age;
}

//co 原理
function co(it){
    return new Promise((resolve, reject)=>{
        function next(data){
            let { value, done } = it.next(data);
            if(!done){
                value.then(data=>{
                    next(data);
                }, reject)
            }else{
                resolve(value);
            }
        }
        next();
    })
}

co(read()).then(data=>{
    console.log(data);//18
}, err=>{
    console.log(err);
})

async + await是es7的語法

let fs = require('mz/fs');//這個mz庫將nodejs裡面的fs全部函式都promise化
// async 函式就是promise es7
// 回撥的問題 不能try/catch 併發問題
async function read() { 
    let age = await fs.readFile('name.txt','utf8')
    return age
}
read().then(data=>{
  console.log(data);//cjw
})

3.手寫一個promise A+

測試程式碼是否符合a+ 規範 為了讓其能測試

npm install promises-aplus-tests -g
promises-aplus-tests 檔名 可以測試
/*
 * @Author: caijw 
 * @Date: 2018-10-01 15:04:43 
 * @Last Modified by: caijw
 * @Last Modified time: 2018-10-08 22:41:06
 */
function Promise(executor){
    var self = this;
    self.status = 'pending';//從pending 轉換為resolved rejected
    self.value = undefined;
    self.reason = undefined;
    self.onResolved = [];//專門存放成功的回撥
    self.onRejected = [];//專門存放失敗的回撥
    //pending -> resolved
    function resolve(value){
        if(self.status === 'pending'){
            self.value = value;
            self.status = 'resolved';
            self.onResolved.forEach(fn=>fn());
        }
    }
     //pending -> rejected
    function reject(reason){
        if(self.status === 'pending'){
            self.reason = reason;
            self.status = 'rejected';
            self.onRejected.forEach(fn=>fn());
        }
    }
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
}

//這裡主要就是遞迴迴圈，判斷是否為promise，如果是promise就繼續遞迴迴圈下去。
function resolvePromise(promise2, x, resolve, reject){
    if(promise2 === x){
        return reject(new TypeError('迴圈引用'));
    }

    let called;
    if(x!=null && (typeof x === 'object' || typeof x === 'function')){
        try{
            let then = x.then;
            //假設他是一個promise，then方法就是一個函式
            if(typeof then === 'function'){
                then.call(x, (y)=>{
                    if(called) return;
                    called = true;
                    // 遞迴解析 如果resolve的是一個promise 就要不停的讓resolve的結果進行處理
                    resolvePromise(promise2, y, resolve, reject);
                },(e)=>{
                    if(called) return;
                    called = true;
                    reject(e);
                })
            }else{//不是就返回
                resolve(x);
            }
        }catch(e){
            if(called) return;
            called = true;
            reject(e);
        }
        
    }else{
        resolve(x);
    }
}





//至返回錯誤的 catch 就是不寫成功的回撥的then方法
Promise.prototype.catch = function(onrejected){
    return this.then(null, onrejected);
}

//1.解決輸出的順序的問題
// all方法的引數 是一個數組，會按照陣列的結果放到成功的回撥裡(只有全成功才算成功)
// race方法引數也是一個數組。會同時發起併發，但是以返回最快的結果為結果


Promise.race = function(promises){
    return new Promise((resolve, reject)=>{
        for(let i=0; i< promises.length; i++){
            let p = promises[i];
            p.then(resolve, reject);
        }
    })
}


Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    })
}

Promise.resolve = function(value){
    return new Promise((resolve, reject)=>{
        resolve(value);
    })
}

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let results = []; let i = 0;
        function processData(index, data) {
        results[index] = data; // let arr = []  arr[2] = 100
        if (++i === promises.length) {
            resolve(results);
        }
        }
        for (let i = 0; i < promises.length; i++) {
        let p = promises[i];
        p.then((data) => { // 成功後把結果和當前索引 關聯起來
            processData(i, data);
        }, reject);
        }
    })
}



//回撥函式
Promise.prototype.then = function(onfulfilled, onrejected){
    // onfulfilled / onrejected是一個可選的引數
    onfulfilled = typeof onfulfilled == 'function' ? onfulfilled :  val=>val;
    onrejected = typeof onrejected === 'function' ? onrejected :err => {
        throw err;
    }
   let self = this;
   
   let promise2;
   promise2 = new Promise((resolve, reject)=>{
        if(self.status === 'resolved'){
            setTimeout(()=>{
                try{
                    let x = onfulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                }catch(e){
                    reject(e);
                }
            }, 0)
        }
        if(self.status === 'rejected'){
            setTimeout(()=>{
                try{
                    let x = onrejected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                }catch(e){
                    reject(e);
                }
            }, 0)
            
        }
        if(self.status === 'pending'){
            self.onResolved.push(function(){
                setTimeout(()=>{
                    try{
                        let x = onfulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    }catch(e){
                        reject(e);
                    }
                }, 0)
            })
            self.onRejected.push(function(){
                setTimeout(()=>{
                    try{
                        let x = onrejected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    }catch(e){
                        reject(e);
                    }
                }, 0)
            })
        }
   })
   return promise2;
}
// 語法糖 簡化問題 巢狀的問題 ，被廢棄了
Promise.defer = Promise.deferred = function(){
    let dfd = {};
    dfd.promise = new Promise((resolve, reject)=>{
        dfd.resolve = resolve;
        dfd.reject = reject;
    })
    return dfd;
}

module.exports = Promise;

參考文件

相關推薦

Promise原理講解 async+await應用（非同步回撥解決方案）

1.非同步程式設計 在JavaScript的世界中，所有程式碼都是單線執行的。 由於這個“缺陷”，導致JavaScript的所有網路操作，瀏覽器事件，都必須是非同步執行。非同步執行可以用: 回撥函式 釋出訂閱 觀察者模式 promise 1.1.回撥函式 function call(id, c

promise實現公共彈框元件（非同步回撥）

情景再現：        1、使用者點選按鈕，彈出確認窗體        2、使用者確認和取消有不同的處理解決方案：         1、採用ES6的promise語法，實現非同步回撥（jquery3.0以後支援）        2、案例樣式採用bootstrap上程式碼：&

【小家思想】通俗易懂版講解JWT和OAuth2，以及他倆的區別和聯絡（Token鑑權解決方案）

相關閱讀 【小家java】java5新特性（簡述十大新特性） 重要一躍 【小家java】java6新特性（簡述十大新特性） 雞肋升級 【小家java】java7新特性（簡述八大新特性） 不溫不火 【小家java】java8新特性（簡述十大新特性） 飽受讚譽 【小家java】java9

阿里App支付服務端介面開發（含後臺非同步回撥，退款）

1.引入相關包檔案 maven匯入方式： <dependency> <groupId>com.alipay</groupId> <artifactId>sdk-java</artifactId> <version>

小米路由mini啟用mentohust連線dr.校園網（附掉線解決方案）

前言：本人所在學校（仲愷）使用的校園網是通過Dr客戶端認證上網的，經過測試，也可以使用windows的mentohust進行登陸，在通過web認證實現上網。 　　Dr客戶端正常工作時會進位制電腦釋放wifi共享網路（有同學使用破解補丁來解決），而men

Java修改JVM記憶體大小整理。（java heap space 解決方案）

JAVA程式啟動時JVM都會分配一個初始記憶體和最大記憶體給這個應用程式。這個初始記憶體和最大記憶體在一定程度都會影響程式的效能；Tomcat預設可以使用的記憶體為128MB，在較大型的應用專案中，這點記憶體是不夠的，需要調大。有以下幾種方法可以選用：第一種 環境myeclipse修改在選單windo

JQuery datatables 重新載入新的action的url datatables ajax reload from new url（全網僅有的解決方案）

      百度了很多，也谷歌了很久，很多人提出了類似的問題，卻沒有答案，好不容易找到一個解決的方式，所以有點興奮的寫下來，希望這個坑同樣有人一起跳。     1.因為後臺的資料是很多的，所以需要進行分頁，這樣就需要拿到datatables傳給後臺的分頁資訊，查詢完資料之後

MySql主從配置檔案問題詳解（資料不同步解決方案）

一、問題描述 在mysql主從配置搭建好以後，偶爾會出現從庫無法同步主庫資料的情況，經過測試，把產生主從資料不同步的集中情況進行了歸納以及總結，問題如下： 1、主庫丟擲異常， 例如主鍵衝突等情況，這是主從配置就會失效，叢庫就無法同步主庫的資料了。如下

開發工具MySQL-MySQL5.7.20服務端圖文安裝教程（附：錯誤解決方案）

一、官網地址 https://www.mysql.com/downloads/ 二、安裝（windows安裝包安裝） 1.點選mysql-installer-community-5.7.20.msi安裝 2.點選點“接受”，Next 3.選“Server Only”，

myeclipse2015配置和建立maven工程（及出現問題解決方案）

說明：myeclipse2015自帶maven外掛，在使用自帶maven建立工程時候，發現maven的配置檔案setting.xml路徑找不到，沒法設定user setting.xml。索性自己安裝了一個maven-3.5.3版本，安裝和配置過程如下。1. 下載maven外掛

Fabric-sdk-java原始碼maven專案環境搭建（import報錯解決方案）

如果匯入時，有彈框報錯：Failed to read the project description file (.project) for 'fabric-sdk-java-master'.  The file has been changed on disk, and i

shell指令碼實現通過ssh跳板機(動態密碼)一鍵登陸伺服器（相關問題與解決方案）

在我日常工作中，登陸伺服器一般分為兩個個步驟，通過ssh命令登陸跳板機，然後再通過跳板機登陸伺服器。登陸跳板機又分為三個步驟，輸入一長串使用者名稱，再通過手機令牌檢視動態密碼，輸入密碼+動態碼。這樣每次登陸伺服器都需要這麼繁瑣的步驟，在需要解決一個問題的時候，在登入上花的時間

如何解決華為官方模擬器ENSP的BUG而正常使用（AR 錯誤40解決方案）

可能 dhcp服務 c2c 1.5 最新版 單獨 virtual 開始 需要 華為模擬器ENSP軟件使用過程中註意事項寫在最前邊：如果所有方法都不成，請用Win7原版鏡像重新安裝系統大家可能在使用ENSP這個華為官方軟件時會遇到各種問題，尤其是AR40錯誤，無法註冊等。那麽

ES6/7/8新特性Promise,async,await,fetch帶我們逃離非同步回撥的深淵

Promise: 在ES6以前如果我們需要在js中進行非同步處理，大多數都是通過使用回撥函式的方式來解決問題，如果簡單的非同步處理，回撥函式的方式看起來還是比較優雅的，逼格還有點高，但是如果非同步操作很多，回撥巢狀就很深，程式碼看起來就會特別彆扭，維護起來成本也會變高這個時候

Storm概念、原理詳解及其應用（一）BaseStorm

when 結構 tails 並發數 vm 虛擬機 cif 異步 優勢 name 本文借鑒官文，添加了一些解釋和看法，其中有些理解，寫的比較粗糙，有問題的地方希望大家指出。寫這篇文章，是想把一些官文和資料中基礎、重點拿出來，能總結出便於大家理解的話語。與大多數“wordc

[C#] .NET4.0中使用4.5中的 async/await 功能實現非同步

在.NET Framework 4.5中添加了新的非同步操作庫，但是在.NET Framework 4.0中卻無法使用。這時不免面臨著抉擇，到底是升級整個解決方案還是不使用呢？如果你的軟體還沒釋出出去，建議直接使用.NET Framework 4.5吧；但是如果已經發布了，又不想使用者重新升級框架到.NET

async/await來處理非同步

async function hello(){ return 'hello world'; } await 可以理解為是 async wait 的簡寫。await 必須出現在 async 函式內部，不能單獨使用。 async function awaitDemo() { aw

微信小程式使用async/await函式進行非同步程式設計

早些時候，研究了一下前端非同步程式設計，想著使用async/await函式編寫非同步程式碼，簡直爽的不要不要的，而我本身是做小程式開發的，所有自然希望能夠讓async/await函式在小程式中大展拳腳了，這裡就簡單介紹一下如何在微信小程式中使用async/await函式來編寫非同步程式碼。 微信

SpringBoot使用Async註解失效分析、解決（spring非同步回撥）

原創 專注JavaWeb開發 2018-12-24 17:30:33 Spring中@Async 在Java應用中，絕大多數情況下都是通過同步的方式來實現互動處理的；但是在處理與第三方系統互動的時候，容易造成響應遲緩的情況，之前大部分都是使用多執行緒來完成此類任務，其實，

ES7之async/await 同步還是非同步

async/await作為ES7的標準被視作javascript非同步函式操作的終極解決方案（超越Promise和Generator）越來越受到重視，而隨著前端構建工具的蓬勃發展，通過配置babel我們在專案中也可以直接使用這一新特性而無需太過在意瀏覽器的相容性