JavaScript高级语法之异步Promise(1:入门)

本文主要是介绍JavaScript高级语法之异步Promise(1:入门)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

1 callback hell(回调地狱)
- 1.1 问题引入
- 1.2 promise简介
2 Promise使用
- 2.1 创建一个Promise容器
- 2.2 then方法
- 2.3 then方法链式操作
- 2.4 then方法链式操作的异常处理
- 2.5 触发resolve条件
- 2.6 Jquery中使用Promise

1 callback hell(回调地狱)

1.1 问题引入

层层嵌套回调函数，最直观的就是如下图所示，不利于代码的维护和美观，不过在回调中 可以确保代码的执行顺序：
回调地狱示例图
假如用nodejs来读取3个文件，由于NodeJS中的文件读取是异步操作，要每一个成功后，在依次读取后面的代码示例如下：

const fs = require('fs');//加载文件模块
const path = require('path');//加载路径模块
//自定义的读取方法，第一参数为路径，第二参数为成功读取的回调，第二位失败读取的回调
function getFileByPath(fpath, succCb, errCb) {fs.readFile(fpath, 'utf-8', (err, dataStr) => {if (err) return errCb(err)succCb(dataStr)})
}// 此处是开始读取的主要代码
//此处有点像开始时的回调地狱的样子了
getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {//先读取文件1.txtconsole.log(data);getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {//读取文件1.txt成功后，在读取文件2.txtconsole.log(data);getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {//读取文件2.txt成功后，在读取文件3.txtconsole.log(data);})})
})

1.2 promise简介

Promise 是一个构造函数，既然是构造函数，那么，我们就可以 new Promise() 得到一个 Promise 的实例；
在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数）和 reject（失败之后的回调函数）
在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
Promise 表示一个异步操作；每当我们 new一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
既然Promise创建的实例，是一个异步操作，那么，这个异步操作的结果，只能有两种状态：

状态1：异步执行成功了，需要在内部调用成功回调函数 resolve 把结果返回给调用者；
状态2：异步执行失败了，需要在内部调用 失败回调函数 reject 把结果返回给调用者；
由于Promise 的实例，是一个异步操作，所以，内部拿到操作的结果后，无法使用 return 把操作的结果返回给调用者；这时候，只能使用回调函数的形式，来把成功 或 失败的结果，返回给调用者；

可以在 new 出来的 Promise 实例上，调用 .then() 方法，预先为这个 Promise 异步操作，指定成功（resolve）和失败（reject）回调函数；

2 Promise使用

ES6中使用Promise函数的原理
Promise 函数本身不是异步，主要是内部装的异步函数
Promise 函数容器示例图：
在这里插入图片描述

2.1 创建一个Promise容器

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将 异步操作的结果，作为参数传递出去
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将 异步操作报出的错误，作为参数传递出去 。
注意: 容器一旦创建，就会立即执行

var fs =require('fs') //nodejs里面的语法
//定义的读取文件的方法
var p= new Promise(function(resolve,reject){//异步代码fs.readFile('a.txt','utf-8',function(err,data){if(err){reject(err)}else{resolve(data)}})
})

2.2 then方法

then方法可以接受两个回调函数，第一个是异步操作成功时（变为resolved状态）时的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（可以省略）。一旦状态改变，就立即调用相应的回调函数
then方法每次都是返回一个新的Promise实例
例如下面代码，若Promise实例对象p成功了就调用then方法第一个参数function(data) 若失败则调用第二个参数 function(err)

p.then(function(data){console.log(data)},function(err){console.log(err)})

示例图如下：
在这里插入图片描述

2.3 then方法链式操作

由于then方法每次都是返回一个新的Promise实例，所以可以进行链式操作，在形参回调函数中可以返回信息，但是只是会对下个then链中的回调函数产生影响
then方法绑定两个回调函数：操作成功时的回调函数(function(data)，操作失败时的回调函数function(err)（可以省略）。这两个函数都接受异步操作传回的值作为参数

p.then(function(data){console.log(data)return 'hello'},function(err){console.log(err)}).then(function(data){console.log(data)   //hello})

上面的代码解析：

当 p 读取成功的时候
当前函数中 return 的结果就可以在后面的 then 中 function 接收到
return普通对象

当你 return 123 后面就接收到 123
return 'hello' 后面就接收到hello
没有 return 后面收到的就是 undefined

return Promise对象
当 return 一个 Promise 对象的时候，后续的 then 中的方法的第一个参数会作为 p2 的 resolve
链式操作示例图如下所示：

2.4 then方法链式操作的异常处理

po.then(step1).then(step2).then(step3).then(console.log,console.error);

po的状态一旦变为resolved，就依次调用后面每一个then指定的回调函数,每一步都必须等到前一步完成，才会执行
最后一个then方法的回调函数console.log和console.error，用法上有一点重要的区别
console.log只显示回调函数step3的返回值，而console.error可以显示step1、step2、step3之中任意一个发生的错误。
假定step1操作失败，抛出一个错误，这时step2和step3都不会再执行了(因为它们是操作成功的回调函数，而不是操作失败的回调函数)
Promises对象开始寻找，接下来第一个操作失败时的回调函数，在上面代码中是console.error
这就是说，Promises对象的错误有传递性。
正是因为错误的传递性，可以在最后修改如下,可以确保异常打印出来：

po.then(step1).then(step2).then(step3).then(null,console.error);

或者使用catch处理捕获异常
catch 的作用：如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并马上进入catch去处理Promise中抛出的异常；

po.then(step1).then(step2).then(step3).catch(function(err){console.log(err.message);});

2.5 触发resolve条件

Promise对象中的两个函数也是有默认定义的resolve，reject
比如resolve("promise测试成功")返回的还是这个信息promise测试成功
在then链中的某个方法添加了括号后，就会立即执行，相当于传入了该方法的结果，因此可以理解直接跳过这个加括号的方法，而带着前面返回的信息调用下个then链方法
比如：p.then("1").then("2").then((value)=>{console.log(value)})此处value是接收刚开始那里p对象的地方的，由于没有触发.then("1").then("2")的resolve函数，因此不会对后续有影响

var p = new Promise(function(resolve,reject){resolve("promise测试成功");
});
function dosome(){console.log("回调函数");return true;
}p.then(dosome).then(function (value){console.log("测试，测试====="+value);
});
运行结果
//回调函数
//测试，测试=====true
p.then(dosome()).then(function (value){console.log("测试，测试====="+value);
});
运行结果
//回调函数
//测试，测试=====promise测试成功

2.6 Jquery中使用Promise

在ajax中使用示例，代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><input type="button" value="获取数据" id="btn"><!--  引入jQuery的包 --><script src="./node_modules/jquery/dist/jquery.min.js"></script><script>$(function () {$('#btn').on('click', function () {$.ajax({url: './data.json',type: 'get',dataType: 'json'}).then(function (data) {console.log(data)})})});</script>
</body>
</html>