一、概述
ES6的Promise对象可解决前端开发中常见的回调地狱问题(即大量异步回调函数的嵌套) 为异步编程提供了一种很好的解决方案
首先 什么是异步问题
例：
一个异步的读取文件的方法
const fs=require("fs")
const path=require("path")
function getFileByPath(filePath)
{
fs.readFile(filePath,"utf-8",(err,dataStr) => {
if (err)
{
throw err;
}
return dataStr;
})
}
var result=getFileByPath(path.join(__dirname,"./files/1.txt"))
console.log(result)
此时 若执行代码 输出的是undefined 而并不是从文件中读取的内容
这是因为 fs.readFile是个异步的读文件方法 主程序不会执行它 而是放入队列中 让子程序执行
主程序将其放入队列中之后就不管它了 然后到了方法结尾 发现没有return 于是 返回了undefined
这样就拿不到返回的值
可用回调函数解决此问题：
传入一个函数 在传入的函数中获取到异步方法里的值进行处理
function getFileByPath(filePath,callback)
{
fs.readFile(filePath,"utf-8",(err,dataStr) => {
if (err)
{
throw err;
}
callback(dataStr)
})
}
getFileByPath(path.join(__dirname,"./files/1.txt"),function(dataStr){
console.log(dataStr)
})
两个回调函数：一个处理成功后的回调 一个处理发生异常时的回调
const fs=require("fs")
const path=require("path")
function getFileByPath(filePath,successCallback,errorCallback)
{
fs.readFile(filePath,"utf-8",(err,dataStr) => {
if (err)
{
return errorCallback(err);
}
successCallback(dataStr)
})
}
getFileByPath(path.join(__dirname,"./files/1.txt"),function(data){
console.log(data);
},
function(err){
console.log(err.message);
}
)
当有个需求：先读取文件1 再读取文件2 最后读取文件3 并按此顺序输出读取的内容
此时 若三个函数调用的时候直接是同级并排的 由于是异步函数 因此输出时会不按规定的顺序
若要按指定顺序输出 只能一个个的嵌套：
getFileByPath(path.join(__dirname,"./files/1.txt"),function(data){
console.log(data);
getFileByPath(path.join(__dirname,"./files/2.txt"),function(data){
console.log(data);
getFileByPath(path.join(__dirname,"./files/3.txt"),function(data){
console.log(data);
})
})
})
这种一层又一层的嵌套 即称为回调地狱
回调地狱即意为大量使用了回调函数(即 将一个函数作为参数传递给另个函数)并且有许多以 })结尾的符号
这使得代码看起来非常混乱
Promise解决回调地域问题的方式是将多层嵌套变成串联式的函数调用
Promise其实是一个构造函数 可以new Promise() 然后得到一个Promise的实例
里面有两个重要的方法：resolve()和reject() 其中 resolve()是成功后的回调函数 reject()是失败后的回调函数
Promise构造函数的Prototype属性上有个.then()方法 因此 只要是Promise函数创建的实例都可以访问.then()方法
Promise是一个容器 里面保存着某个未来才会结束的事件(异步操作)的结果
每当new了一个Promise实例之后 该实例就表示一个具体的异步操作
该异步操作的结果只有两种状态：成功 or 失败
- Promise执行成功后需要在内部调用成功的回调函数
resolve()将结果返回给调用者 - Promise执行失败后需要在内部调用失败的回调函数
reject()将结果返回给调用者
由于Promise的实例是异步操作 因此内部拿到操作的结果后 无法使用return将结果返回给调用者 需要借助回调函数(callback)将成功或失败的结果返回给调用者
可在new出来的Promise实例上调用.then()方法 预先地为该Promise异步操作指定成功和失败后的回调函数(resolve()或是reject())
function test()
{
var promise=new Promise(function(){
// 异步函数
})
return promise;
}
test().then(function(){
})
Promise的特点：只要被创建立刻执行传入的方法
每当new了一个Promise实例的时候 就会立即执行该异步操作中的代码
也就是说 new的时候 不仅仅是得到一个Promise实例 还会立即调用给Promise构造方法传递的方法 执行该方法里面的异步操作代码
const fs=require("fs")
const path=require("path")
var promise=new Promise(function(){
fs.readFile(filePath,"utf-8",(err,dataStr)=>{
if (err)
{
throw err;
}
console.log(dataStr)
})
})
二、用法
通过.then()指定成功和失败的回调函数：
在如下的实例中：
执行getFileByPath()方法 进入方法体里面 new了一个Promise实例并立即执行传入的function
接下来 传入的function还没执行完 由于是异步的 立刻return 将promise实例返回到外面
然后在外面拿到了 在此时读文件的方法还未执行完毕 通过.then()方法 指定了成功回调函数和失败回调函数
然后 当文件读取完毕 访问了resolve(若成功)或reject(若失败) 此时由于是外面的调用先于读文件的方法
因此必定能访问到resolve()和reject() 完美解决了异步无法获取到数据的问题
const fs=require("fs")
const path=require("path")
function getFileByPath(filePath)
{
// 在传入Promise的方法的参数列表中定义resolve和reject这两个形参
var promise=new Promise(function(resolve,reject){
fs.readFile(filePath,"utf-8",(err,dataStr)=>{
if (err)
{
return reject(err);
}
resolve(dataStr);
})
})
// 将该promise对象返回出去
return promise;
}
var mypromise=getFileByPath(path.join(__dirname,"./files/1.txt"))
// 通过then()方法预先指定成功和失败的方法的实参
// 由于是异步操作 因此是.then()先执行 并在.then()的参数里具体化了resolve和reject 因此必定能调用成功
mypromise.then(function(data){
console.log(data)
},
function(err){
console.log(err.message)
}
)
将Promise简化：
const fs=require("fs")
const path=require("path")
function getFileByPath(filePath)
{
return new Promise(function(resolve,reject){
fs.readFile(filePath,"utf-8",(err,dataStr)=>{
if (err)
{
return reject(err);
}
resolve(dataStr);
})
})
}
getFileByPath(path.join(__dirname,"./files/1.txt")).then(function(data){
console.log(data)
},
function(err){
console.log(err.message)
}
)
使用Promise解决回调地狱问题：
在.then()里可以返回新的Promise实例 然后继续用.then()进行下一步的操作
const fs=require("fs")
const path=require("path")
function getFileByPath(filePath)
{
return new Promise(function(resolve,reject){
fs.readFile(filePath,"utf-8",(err,dataStr)=>{
if (err)
{
return reject(err);
}
resolve(dataStr);
})
})
}
// 读取文件1
getFileByPath(path.join(__dirname,"./files/1.txt"))
.then(function(data){
console.log(data)
// 读取文件2
return getFileByPath(path.join(__dirname,"./files/2.txt"))
})
.then(function(data){
console.log(data)
// 读取文件3
return getFileByPath(path.join(__dirname,"./files/3.txt"))
})
.then(function(data){
console.log(data)
})
Promise的异常捕获
在Promise中 有两种异常捕获的方式：
一种是前面的Promise执行失败了也不影响后续的Promise的正常执行
另一种是前面的Promise执行失败了 后续的Promise都不执行
1、异常捕获方式一：前面的Promise执行失败了也不影响后续的Promise的正常执行
可为每个Promise单独地通过.then()指定失败后的回调函数
若前面的Promise执行失败 后续的Promise操作不会被终止 仍然执行
在.then()方法中的第二个参数位置传递一个回调方法 捕获异常 进行处理 然后在里面返回一个Promise对象给下一个.then()
getFileByPath(path.join(__dirname,"./files/a.txt"))
.then(function(data){
console.log(data)
// 读取文件2
return getFileByPath(path.join(__dirname,"./files/2.txt"))
},function(err){
console.log(err.message)
// 返回一个新的Promise 不影响后续的操作执行
return getFileByPath(path.join(__dirname,"./files/2.txt"))
})
.then(function(data){
console.log(data)
// 读取文件3
return getFileByPath(path.join(__dirname,"./files/3.txt"))
})
.then(function(data){
console.log(data)
})
2、异常捕获方式二：一旦出现报错 立即终止所有Promise的执行
若前面任何一个Promise执行失败 立即终止所有Promise的执行 并立即进入catch()进行错误捕获
在最后用.catch()捕获异常
getFileByPath(path.join(__dirname,"./files/1.txt"))
.then(function(data){
console.log(data)
// 读取文件2
return getFileByPath(path.join(__dirname,"./files/a.txt"))
})
.then(function(data){
console.log(data)
// 读取文件3
return getFileByPath(path.join(__dirname,"./files/3.txt"))
})
.then(function(data){
console.log(data)
})
.catch(function(err){
console.log(err.message)
})
在JQuery的Ajax中使用Promise：
JQuery发送Ajax请求也支持Promise
普通的AJAX：
<script> $(function(){ $.ajax({ url:"localhost:8080/api/getData", type:"get", dataType:"json", success:function(data) { console.log(data); }, error:function(err) { console.log(err); } }) }) </script>
使用Promise：
往.then()里分别传入两个成功后和失败后的回调函数
<script> $(function(){ $.ajax({ url:"localhost:8080/api/getData", type:"get", dataType:"json" }) .then(function(data){ console.log(data); }, function(err){ console.log(err) }) }) </script>
