九、前端中的异步方法Promise，Promise详解

本文主要是介绍九、前端中的异步方法Promise，Promise详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Promise简介

什么是promise

Promise是异步编程的一种解决方案，它的构造函数是同步执行的，then 方法是异步执行的。

为什么使用Promise

在JavaScript的世界中，所有代码都是单线程执行的。但是，很多网络操作，浏览器事件，都必须是异步执行，以保证软件的执行效率，毕竟如果用户发一个请求，网站在请求期间直接卡住，用户什么操作都做不了，是一个很糟糕的体验。异步f方法执行后的同步处理可以用回调函数实现，回调函数形式如下：

function callback() {console.log('Done');
}
doSometing(){.....callBack()
}

但是这样存在一个问题，比如我们先要向服务器请求数据A，得到A后，再通过A向服务器请求B，得到B后还需要得到C，最后才能真正用C来处理我们的数据，这时候就会有三层回调！

getA(function(A) {getB(A, function(B) {getC(B, function(C) {console.log('得到最终结果: ' + C);}, failureCallback);}, failureCallback);
}, failureCallback);

阅读上面代码，是不是很难受，上述形成了经典的 回调地狱。Promise就是用来处理这样的问题的。现在用promise来重写写这样的逻辑：

getA().then(function(A) {return getB(A);
})
.then(function(B) {return getC(B);
})
.then(function(C) {console.log('得到最终结果: ' + C);
})
.catch(failureCallback);

这样是不是变得清晰很多啦！
我们可以发现，promise的链式操作减低了编码难度，代码可读性明显增强。

promise中的状态

promise对象仅有三种状态
pending（进行中）
fulfilled（已成功）
rejected（已失败）

pedding（初始状态）：调用promise时，一开始就呈现出等待状态，遇到resolve或者reject之前，都处于这个状态，且可以改变，但如果确定了状态（fulfilled/reject），则结果将永远不变，不能再次修改

fulfilled（成功状态）：在执行了resolve后，promise则会从pedding变成fulfilled，后续会进入.then 的回调函数中，在回调函数的第一个参数函数中可以获取到值

rejected（失败状态）：在执行了reject后，promise状态会变成rejected，rejected函数传递的参数，可以在.then的第二个参数函数中获取的到，或者是在.catch获取到，但是如果程序上的错误，得通过.catch函数去拿到失败消息，在.then中是获取不了的

认真阅读下图，我们能够轻松了解promise整个流程

2.Promis的用法

Promise对象是一个构造函数，用来生成Promise实例：

const p1 = new Promise((resolve, reject) => {resolve('hello');
})
.then(result => result)
.catch(e => e);

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

resolve：用于创建一个成功状态的Promise对象，可以之间在.then的成功回调中，获取resolve的值。

const p = Promise.resolve("成功");
p.then((res) => {console.log("----打印：", res); //----打印： 成功
});//该用法类似于
const p1 = new Promise((resolve, reject) => {resolve("成功");
});
p1.then((res) => {console.log("----打印：p1", res); //----打印：p1 成功
});//后续代码中都会出现类似，或者另外中写法，尝试的时候，不能同时放出来执行

reject：这个方法跟Promise.resolve一样，只是作用不同，属于拒绝的状态；可以直接在.then的失败回调中，获取reject的值；也可以在.catch中获取；如果两者同时出现代码中，看看是catch写在前面还是.then函数写在前面 —业务中，拒绝状态用.then去执行回调，异常用.catch

const p = Promise.reject("失败");
p.then((res) => {console.log("----打印：", res); //不执行},(rej) => {console.log("----打印：", rej); //----打印： 失败}
);//另外写法 
p.then((res) => {console.log("----打印：p", res); //不执行},(rej) => {console.log("----打印：p", rej); //----打印：p 失败}
).catch((error) => {console.log("----打印：catch", error); //不执行
});//另外写法---基本没有吧catch写在第一个
p.catch((error) => {console.log("----打印：catch", error); //----打印：catch 失败
}).then((res) => {console.log("----打印：p", res); //不执行},(rej) => {console.log("----打印：p", rej); //不执行}
);//另外写法
p.then((res) => {console.log("----打印：p", res); //不执行
}).catch((error) => {console.log("----打印：catch", error); //----打印：catch 失败
});//该用法类似于
const p1 = new Promise((resolve, reject) => {reject("失败");
});
p1.then((res) => {console.log("----打印：p1", res); //不执行},(rej) => {console.log("----打印：p1", rej); //----打印：p1 失败}
);

另外，Promise构建出来的实例存在以下方法：

• then()
• catch()
• finally()

then()：
then是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数

getJSON("/posts.json").then(function(json) {return json.post;
}).then(function(post) {// ...
});

catch:
catch()方法是 .then(null, rejection) 或 .then(undefined, rejection) 的别名，用于指定发生错误时的回调函数.

getJSON('/posts.json').then(function(posts) {// ...
}).catch(function(error) {// 处理 getJSON 和 前一个回调函数运行时发生的错误console.log('发生错误！', error);
});

finally()
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

这篇关于九、前端中的异步方法Promise，Promise详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---