基本用法
关于Promise的资料，网上有很多了，这里简单粗暴一点，直接上代码。
假设我们要做一个访问后端API的函数，那么我们可以这样模拟一下。
const mySend = (url, data) => {
// 接收url 和data，假装向后端提交
console.log('url:', url, data)
// 定义一个实例
const p = new Promise((resolve, reject)=>{
// resolve，reject是形式参数，可以是任意写法，如(res, rej)
// 默认第一个参数实现的是resolve功能；
// 第二个参数实现的是reject功能。
console.log("假装访问了一下后端，并且获得了数据。")
const data = {
name: 'jyk',
time: new Date().valueOf()
}
// 成功了，返回给调用者
resolve(data)
// 不同于return, resolve()执行完成后后面的代码还会执行。
console.log('resolve后的代码')
// 如果 resolve 被调用了，那么 reject 就不会被调用了。
// 失败的话，调用reject返回给调用者。
reject('失败了')
})
return p
}
new Promise
先定义一个函数，用于接收调用者的参数。
然后生成一个Promise的实例，在里面进行我们想要的操作。resolve(data)
如果操作成功就调用 resolve(data) ，返回给调用者；reject('失败了')
如果操作失败，就调用reject('失败了') ，返回给调用者。
注意：返回参数只能有一个，不支持多个参数，如果需要返回多个，可以组成一个对象。
有些例子会用setTimeout做演示，其实效果都一样，不是必须弄个异步的方式来模拟。
单次调用
函数写好了，怎么调用呢？其实调用方法和axios的使用方式很像，因为axios也是用promis封装的。
const submit = () => {
mySend('/api/person', {id: 122})
.then((data) => {
console.log('回调数据：', data)
})
.catch((error) => {
console.log(error)
})
}
调用很简单，看着也非常眼熟对吧。
- then 响应成功的回调，
- catch 响应失败（异常）的回调。
- 运行结果：
url-data: /api/person {id: 122}
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):52 回调数据： {name: "jyk", time: 1612084395672}
依次调用
如果要多次调用呢？而且要得到上一次返回的数据，才能发起下一次的访问。
const submitStep = () => {
mySend('/api/person1', [1,2,3]).then((data) => {
console.log('第一个返回：', data)
return mySend('/api/person2', data) // 发起第二次请求
}).then((data) => {
console.log('第二个返回：', data)
return mySend('/api/person3', data) // 发起第三次请求
}).then((data) => {
console.log('第三个返回：', data)
return mySend('/api/person4', data) // 发起第四次请求
}).then((data) => {
console.log('第四个返回：', data)
})
}
第一次调用的回调函数里面，使用return的方式，发起下一次调用。这样就可以避免回调地域。
- 运行结果：
url-data: /api/person1 (3) [1, 2, 3]
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):62 第一个返回： {name: "jyk", time: 1612084751425}
(index):26 url-data: /api/person2 {name: "jyk", time: 1612084751425}
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):65 第二个返回： {name: "jyk", time: 1612084751426}
(index):26 url-data: /api/person3 {name: "jyk", time: 1612084751426}
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):68 第三个返回： {name: "jyk", time: 1612084751428}
(index):26 url-data: /api/person4 {name: "jyk", time: 1612084751428}
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):71 第四个返回： {name: "jyk", time: 1612084751430}
可以注意一下time的值，前后是对应的。
批量调用
如果下次调用不需要上一次的结果呢？那么能不能一起调用呢？当然是可以的。
const submitMore = () => {
Promise.all([
mySend('/api/person11', [1,2,3]),
mySend('/api/person22', [4,5,6]),
mySend('/api/person33', [7,8,9])
]).then((data) => {
console.log("一起调用，一起返回：")
console.log('data:', data)
console.log('data11:', data[0])
console.log('data22:', data[1])
console.log('data33:', data[2])
},(msg) => {
console.log(msg)
})
}
Promise.all
使用 Promise.all，把调用写成数组的形式。
返回的data也是一个数组的形式，其顺序会对照上面的调用顺序。运行结果：
url-data: /api/person11 (3) [1, 2, 3]
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):26 url-data: /api/person22 (3) [4, 5, 6]
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):26 url-data: /api/person33 (3) [7, 8, 9]
(index):32 假装访问了一下后端，并且获得了数据。
(index):39 resolve后的代码
(index):82 一起调用，一起返回：
(index):83 data: (3) [{…}, {…}, {…}]
0: {name: "jyk", time: 1612085029968}
1: {name: "jyk", time: 1612085029969}
2: {name: "jyk", time: 1612085029970}
length: 3__proto__: Array(0)
(index):84 data11: {name: "jyk", time: 1612085029968}
(index):85 data22: {name: "jyk", time: 1612085029969}
(index):86 data33: {name: "jyk", time: 1612085029970}
可以看到，先发起了申请，然后结果会一起返回。
小结
这样看起来就不会晕了吧。我的想法是，先会用能够运行起来，以后有空了在去研究原理和其他细节。
在线演示：https://naturefwvue.github.io/nf-vue-cnd/ES6/promise/
源码：https://github.com/naturefwvue/nf-vue-cnd/tree/main/ES6/promise
