什么是Promise?
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
简单来说,Promise是用来解决js中"回调地狱"的问题。
什么是回调地狱?
在编程中,经常会处理到回调函数。如果一个模块中回调函数过多,特别是在回调中处理的业务还有回调,就会导致回调嵌套。这就会导致代码结构混乱,俗称回调地狱。我们假设一下场景,分别创建3个文件
a.json
{
"next": "b.json",
"msg": "this is a"
}
b.json
{
"next": "c.json",
"msg": "this is b"
}
c.json
{
"next": null,
"msg": "this is c"
}
我们希望通过a.json中的next属性读取b.json的信息,然后再通过b.json的next读取c.json中的信息。那么,我们很自然会写以下的代码:
const fs = require("fs");
const path = require("path");
// callback方式获取文件的内容
function getFileContent(fileName, callBack) {
const fullFileName = path.resolve(__dirname, "files", fileName);
fs.readFile(fullFileName, (err, data) => {
if (err) {
console.log(err);
return
}
callBack(JSON.parse(data.toString()));
// console.log();
})
}
getFileContent("a.json", aData => {
console.log(aData);
getFileContent(aData.next, bData => {
console.log(bData);
getFileContent(bData.next, cData => {
console.log(cData);
})
})
})
这样的处理方式,固然是可以,但是每次的callBack都需要依赖上次的结果,这样很容易造成断链的情况,而且这样写代码,会造成多层级嵌套的情况,也不方便阅读,那么我们就可以尝试以下ES6中的promise对象,解决这个问题。
Promise的状态
ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
那么我们就可以对以上的代码进行改造:
const fs = require("fs");
const path = require("path");
//promise
function getFileContent(fileName) {
const promise = new Promise((resolve, reject) => {
const fullFileName = path.resolve(__dirname, "files", fileName);
fs.readFile(fullFileName, (err, data) => {
if (err) {
reject(err);
return
}
resolve(JSON.parse(data.toString()));
// console.log();
})
})
return promise;
}
getFileContent("a.json").then(aData => {
console.log(aData);
return getFileContent(aData.next);
}).then(bData => {
console.log(bData);
return getFileContent(bData.next);
}).then(cData => {
console.log(cData);
})