使用promise解决回调地狱_ES6的Promise对象的的介绍及用法(解决回调地狱问题)

一、概述

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：

$(function(){

$.ajax({

url:"localhost:8080/api/getData",

type:"get",

dataType:"json",

success:function(data)

{

console.log(data);

},

error:function(err)

{

console.log(err);

}

})

})

使用Promise：

往.then()里分别传入两个成功后和失败后的回调函数

$(function(){

$.ajax({

url:"localhost:8080/api/getData",

type:"get",

dataType:"json"

})

.then(function(data){

console.log(data);

},

function(err){

console.log(err)

})

})

标签：function,ES6,console,err,用法,Promise,path,data

来源： https://blog.csdn.net/Piconjo/article/details/105866545