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：

<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>

---