前言
本文主要是对Promise本身的用法做一个全面解析而非它的原理实现,如果你对Promise的用法还不是很熟悉或者想加深你对Promise的理解,我相信这篇文章一定会帮到你。
首先让我们先了解一下JavaScript为什么会引入Promise
回调地狱
让我们先看这样一段代码,jquery中ajax请求:
$.ajax({
url: “url1”,
data: {},
success(res1) {
//获取到第一个数据
console.log(res1);
//根据第一个数去去获取第二个数据
$.ajax({
url: “url2”,
data: {
query: res1.xxx,
},
success(res2) {
//获取到第二个数据
console.log(res2);
//根据第二个数去去获取第三个数据
$.ajax({
url: “url3”,
data: {
query: res2.xxx,
},
success(res3) {
//获取到第三个数据
console.log(res3);
//…
},
});
},
});
},
error(err) {
console.log(err);
},
});
我们会发现这些回调一层又一层,这就被称为回调地狱(callback hell),蓝狮注册登陆尤其业务逻辑复杂的时候这些回调就会变得难以维护。于是Promise就出现了。我们再看一个使用promise封装的axios请求:
axios
.get(url1, {})
.then((res1) => {
//获取到第一个数据
console.log(res1);
//根据第一个数去去获取第二个数据
return axios.get(url2, { query: res1.xxx });
})
.then((res2) => {
//获取到第一个数据
console.log(res2);
//根据第二个数去去获取第三个数据
return axios.get(url3, { query: res2.xxx });
})
.then((res3) => {
//获取到第三个数据
console.log(res3);
//…
})
.catch((err) => {
console.log(err);
});
通过对比我们会发现Promise解决了传统的回调函数的回调地狱问题,使得业务逻辑显得更加清晰了。接下来我们就开始正式介绍Promise了。
概述
Promise是现代异步编程的基础,在Promise返回给我们的时候操作其实还没有完成,但Promise对象可以让我们操作最终完成时对其进行处理,无论成功还是失败。
Promise的返回有三种状态分别是等待(pending), 成功(fulfilled),蓝狮官网拒绝(rejected),我们看以下示例(后续我们将用延时器setTimeout来代表我们的异步操作)
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
},1000);
});
console.log(promise1);
此时我们可以看到我们获取的Promise是pending(等待的状态)。
同样当我们一秒钟过后再去获取Promise
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
setTimeout(() => {
console.log(promise1);
}, 1000);
它得到的就是成功(fulfilled)状态。
然后我们将resolve换成reject
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(1);
}, 1000);
});
setTimeout(() => {
console.log(promise1);
}, 1000);
它得到的便是拒绝(rejected)状态,同时给你抛出了一个错误。
基本使用
Promise构造函数只有一个函数作为参数,这个函数会在一个Promise被实例化出来后会被立即执行
0 Comments