基本用法
关于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} 复制代码
可以看到,先发起了申请,然后结果会一起返回。
小结
这样看起来就不会晕了吧。我的想法是,先会用能够运行起来,以后有空了在去研究原理和其他细节。
在线演示:naturefwvue.github.io/nf-vue-cnd/…