ES6(三) Promise 的基本使用方式

简介: 关于Promise的资料,网上有很多了,这里简单粗暴一点,直接上代码。 假设我们要做一个访问后端API的函数,那么我们可以这样模拟一下。

基本用法



关于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/…


源码:github.com/naturefwvue…



相关文章
|
8天前
|
前端开发
理解 ES6 中的 Promise
【10月更文挑战第24天】ES6 中的 Promise 是一种用于处理异步操作的机制,它提供了一种更优雅、更可控的方式来处理异步任务的结果。Promise 可以看作是对异步操作结果的一种承诺,它可以处于三种不同的状态:Pending(等待中)、Fulfilled(已完成,即成功)和 Rejected(已拒绝,即失败)。
|
29天前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
16 1
|
29天前
|
前端开发 Java
说说你对es6中promise的理解?
说说你对es6中promise的理解?
12 1
|
29天前
|
前端开发 Java
说说你对es6中promise的理解?
说说你对es6中promise的理解?
|
2月前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
36 3
|
28天前
|
存储 前端开发 JavaScript
关于 ES6 中 Promise 的面试题
关于 ES6 中 Promise 的面试题
16 0
|
3月前
|
前端开发
手写实现ES6的Promise.all()和Promise.race()函数
这篇文章介绍了如何手写实现ES6的`Promise.all()`和`Promise.race()`函数,提供了实现这两个Promise聚合函数的详细代码示例,并展示了如何使用它们。
手写实现ES6的Promise.all()和Promise.race()函数
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
64 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
94 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。