JS异步编程之Promise

2019年8月31日 110次阅读 来源: 种瓜南山下

媒介

《JS异步编程之 callback》一文我们了解了“JS 是基于单线程事宜轮回”的观点构建的，回调函数不会马上实行，由事宜轮询去检测事宜是不是实行终了，当实行完有效果后，将效果放入回调函数的参数中，然后将回调函数添加到事宜队列中守候被实行。

同时也讲了回调函数的题目：

一是“回调地狱”，因为异步回调函数的特性：回调函数是作为异步函数的参数，一层一层嵌套，当嵌套过量，将使代码逻辑变得杂沓，也没法做好毛病捕获和处置惩罚（只能在回调函数内部 try catch）。

二是回调的实行体式格局不相符自然语言的线性头脑体式格局，不轻易被明白。

三是掌握反转（掌握权在其他人的代码上），如果异步函数是他人供应的库，我们把回调函数传进去，我们并不能晓得异步函数在挪用回调函数以外做了什么事情。

func1(() => {
    func2(() => {
        func3(() => {
            func4(() => {
                try {
                    ...
                } catch (err){
                    ...
                }
            })
        });
    });
});

一、Promise 道理

起首，Promise 中文翻译为“许诺”， 是 JavaScript 的一种对象，示意许诺终将返回一个效果，不管胜利照样失利。

Promise 有三个状况：守候中（pending），完成（fullfilled），失利（rejected）, Promise 的设想具有原子性，状况一旦从 pending 状况转换为 fullfilled 状况或许 rejected 状况后，将不能被转变。

《JS异步编程之Promise》

var promise1 = new Promise((resolve, reject) => {
    console.log("Promise 组织器会马上实行");
    setTimeout(function (){
        if(true) {
            resolve("完成");
        } else {
            reject("失利");
        }
    }, 1000);
})
promise1
.then((result) => {
    // do something
    console.log(result);
    return 1
    
    // return Promise.resolve(1);  // 返回一个决定为胜利的 promise 实例
    // return Promise.reject("error");  // 返回一个决定为谢绝的 Promise 实例
})
.then((result) => {
    // .then() 要领会返回一个 promise, 完成挪用的参数为前一个 promise 的返回值或许决定值。
    // do other things
    console.log(result);
    throw new Error("毛病")  // 抛出毛病是隐式谢绝
})
.catch((error) => {
    // 捕获毛病
    console.log(error)
})
.then(() => {
    // 还能继承实行！
})
.finally(() => {
    // always do somethings
    console.log("finally!")
})

二、Promise 的上风

  1. 链式挪用

Promise 运用 then 要领后还会返回一个新的 Promise 对象，便于我们通报状况数据，同时链式写法接近于同步写法，更相符线性头脑。

  1. 毛病捕获

比拟回调函数的毛病没法在外部捕获的题目，Promise 能够为一连串的异步挪用供应毛病处置惩罚。

  1. 掌握反转再反转

因为第三方供应的异步函数，没法保证回调函数怎样被实行，然则 Promise 的特性，能够保证异步函数只能被 resolve 一次，以及一直以异步的情势实行代码。

  1. 能够运用 Promise.all 和 Promise.race 来处理 Promise 一直未决定和并行 Promise 嵌套的题目

三、Promise 的不足

  1. 每一个 .then() 都是一个自力的作用域

到场有很多个 .then() 要领，就会建立很多个自力的作用域，那末将只能经由过程表面包裹一层函数作用域的闭包来同享状况数据

  1. 没法作废单个 .then()

当 Promise 链中恣意一个 .then() 要领中有语句实行毛病后，只管经由 catch 要领的毛病处置惩罚，照样并不会中缀悉数 Promise 链的实行。

  1. 没法得知进度

因为 Promise 只能从 pending 到 fullfilled 或 rejected 状况，没法得知 pending 阶段的进度。

四、Promise 运用

// Promise 封装 ajax
function fetch(method, url, data){
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        var method = method || "GET";
        var data = data || null;
        xhr.open(method, url, true);
        xhr.onreadystatechange = function() {
            if(xhr.status === 200 && xhr.readyState === 4){
                resolve(xhr.responseText);
            } else {
                reject(xhr.responseText);
            }
        }
        xhr.send(data);
        })
}

// 运用
fetch("GET", "/some/url.json", null)
.then(result => {
    console.log(result);
})

// 封装 nodejs error first 作风回调
function readFile(url) {
    return new Promise((resolve, reject) => {
       fs.readFile(url,'utf8', (err, data) => {
        if(err) {
            reject(err);
            return;
        }
        resolve(data)
        }) 
    })
}

五、总结

Promise 是 ES6 提出的简化异步流程掌握的新范例，强调异步使命的完成状况且具有原子性，这使得我们的代码更轻易追踪和保护。Promise 在事宜轮询中属于异步事宜队列中的微使命，而微使命老是一次性悉数实行，而宏使命是每轮轮询实行一个，此节内容参考我之前的文章《JS专题之事宜轮回》。

2019/02/24 @Manncoffee

迎接关注我的个人民众号“谢南波”，专注分享原创文章。
《JS异步编程之Promise》

    原文作者：种瓜南山下
    原文地址: https://segmentfault.com/a/1190000018265595
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞