目录
Promise是什么
Promise是ECMAscript 6 原生提供的一个对象。用来解决回调地狱的问题，所谓回调地狱就是函数不断嵌套调用。Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
Promise有什么用
传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够 直观，就是常说的 Callback Hell。Promise可以解决这样的问题，Promise就是异步编程的一种解决方案。通过链式调用的方式来解决，也就是Promise完成当前异步操作后交给下一个Promise来继续完成异步操作。
Promise的三种状态
Promise有三种状态，表示异步操作的的状态，并且不受外界影响。
- pending：初始状态
- fulfilled：表示操作成功
- rejected：表示操作失败
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
Promise的创建
Promise是一个对象，所以使用new Promise()创建对象。
var p = new Promise((resolve, reject) => {
// 写异步处理的代码，如ajax
// 在异步操作结束后调用resolve或者reject传给下一个Promise的调用
// resolve(参数) 表示异步操作成功并把数据携带给下一个Promise
// reject(参数) 表示异步操作失败并把数据携带给下一个Promise
})上面的代码通过 p.then()的方法实现链式调用，then里面继续传入一个Promise对象，并且then方法中可以接受resolve传过来的参数。而reject会被catch捕获，同样也可以在catch中得到reject传过来的参数。
Promise的基本使用
下面使用代码完成3次异步请求。首先看看使用$.ajax的方式如何完成。
首先在本地创建了3个json文件进行测试用
传统的ajax嵌套调用的代码
$.ajax({
url: "data/student_id_100.json",
success(res) {
console.log("第一次请求：", res)
$.ajax({
url: `data/class_id_10.json`,
success(res) {
console.log("第二次请求：", res)
$.ajax({
url: `data/school_id_9.json`,
success(res) {
console.log("第三次请求：", res)
},
error(err) {
console.log("第三次请求：", err)
}
})
},
error(err) {
console.log("第二次请求：", err)
}
})
},
error(err) {
console.log("第一次请求：", err)
}
})
可以发现已经开始出现大量的嵌套问题，并且上面代码才只有3次回调，如果更多，那么回调地狱的问题就会更明显。
Promise写法
let p = new Promise((resolve, reject) => {
$.ajax({
url: "data/student_id_100.json",
success(res) {
console.log("第一次请求：", res)
resolve(res)
},
error(err) {
reject(err)
}
})
}).then(resultData => {
return new Promise((resolve, reject) => {
$.ajax({
url: `data/class_id_10.json`,
success(res) {
console.log("第二次请求：", res)
resolve(res)
},
error(err) {
reject(err)
}
})
})
}).then(resultData => {
return new Promise((resolve, reject) => {
$.ajax({
url: `data/school_id_9.json`,
success(res) {
console.log("第三次请求：", res)
},
error(err) {
reject(err)
}
})
})
}).catch(err => {
console.log(err)
})上面的Promise写法功能和第一个ajax嵌套调用实现的功能是一样的。通过.then的方法实现链式调用。.then里面的resultData这个参数就是resolve(参数)这个传过来的参数。而最后的catch就是捕捉所有的reject，err就是reject传过来的参数。
可以发现Promise的写法解决的回调地狱的问题，通过链式调用，但可以发现，在Promise里面有大量的重复代码，我们可以提取出来，形成一个函数，于是就有了下面的写法。
Promise的简洁写法
我们提取Promise的重复代码为一个get方法，通过调用这个方法来实现链式编程。
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
})
}
get("data/student_id_100.json").then(resultData => {
console.log("第一次请求：", resultData)
return get(`data/class_id_10.json`)
}).then(resultData => {
console.log("第二次请求：", resultData)
return get(`data/school_id_9.json`)
}).then(resultData => {
console.log("第三次请求：", resultData)
}).catch(err => {
console.log(err)
})可以发现，这样代码就非常简洁了，并且也解决的回调地狱的问题。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/146320.html
