- Promise简单上手
Promise对象的出现用于解决传统的ajax请求嵌套回调的问题。Promise对象通过new 关键字创建，构造函数需要传递一个函数作为参数，并且该函数需要两个形参（resolve和reject）。如下
let p = new Promise((resolve,reject) => {
})
promise对象共有三种状态为成功、失败和触发。
通常我们会在promise的构造函数中执行ajax查询，ajax查询成功则调用resolve方法，失败则调用reject方法。如下：
let p = new Promise((resolve,reject) => {
$.ajax({
url:"./data1.json",
data:{
},
method:"get",
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
当请求成功后，调用了resolve方法，一旦调用了该方法，则p对象的状态就置为成功，然后就会触发p对象的then方法。如下：
let p = new Promise((resolve,reject) => {
$.ajax({
url:"./data1.json",
data:{
},
method:"get",
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
p.then(res => {
console.log(res)
})
结果：
这里ajax发送请求成功后我们调用resolve方法后触发了then方法的回调，我暂且理解为then回调为处理ajax请求成功的逻辑，catch回调为处理ajax请求失败的逻辑。
- then方法返回值
then方法的返回值有两种情况，首先说明一下，then方法永远返回Promise对象。
- then方法的返回值为非promise对象，如return 123
let p = new Promise((resolve,reject) => {
$.ajax({
url:"./data1.json",
data:{
},
method:"get",
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
var result = p.then(res => {
console.log(res)
return 123
})
console.log(result)
输出结果
当then方法的返回值为非promise对象是，则then方法的返回值为promise对象，且该对象的状态为成功，成功的值就是返回值。
- then方法的返回值为promise对象
let p = new Promise((resolve,reject) => {
$.ajax({
url:"./data1.json",
data:{
},
method:"get",
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
var result = p.then(res => {
console.log(res)
return new Promise((resolve,reject) => {
})
})
console.log(result)
结果：
当then方法返回的promise对象的函数中没有调用resolve或者reject，则返回的promise对象的状态为触发状态。
调用resolve方法
var result = p.then(res => {
console.log(res)
return new Promise((resolve,reject) => {
resolve("Hello")
})
})
console.log(result)
如果调用了resolve的返回的promise对象的状态就为成功，此时就会调用这个对象的then方法。同样，如果调用的reject则会调用该对象的catch方法
利用这个特性我们就可以进行链式调用，解决回调嵌套问题。
案例：利用Promise顺序读取文件
function axiosPost(url,data){
return new Promise((resolve,reject)=>{
$.ajax({
url,
data,
method:"get",
success(res){
resolve(res)
},
error(er){
reject(er)
}
})
})
}
axiosPost("./data1.json",{
})
.then(res => {
console.log(res)
return axiosPost("./data2.json",{
})
})
.then(res => {
console.log(res)
return axiosPost("./data3.json",{
})
})
.then(res => {
console.log(res)
})
}
首先我们调用了 axiosPost函数，返回了Promise对象，而且在第一次调用中请求了data1.json文件进行了输出，在then方法中又调用了axiosPost方法，此时then方法的返回值是一个Promise对象，那既然是一个Promise对象，则该对象的状态取决于对象构造函数中调用了哪个方法，请求成功以后调用resolve，则该对象的状态为成功，一旦为成功触发then方法，继续请求data3.json。这样写的代码不会出现多层嵌套，很方便解决了回调地狱问题。