• Promise 之初探


    陈旧的知识应该更新一下了,先尝试一下 Promise ,主要参考 https://www.cnblogs.com/whybxy/p/7645578.html

    定义一个函数

    直接上干货,定义一个函数:

    const myPost = (url, data) => {
        // 接收url 和data,向后端提交
        console.log('url:', url)
        console.log('data:', data)
        const p = new Promise((resolve,reject)=>{ // resolve,reject是形式参数,可以是任意写法,如(res, rej),默认第一个参数实现的是resolve功能;第二个参数实现的是reject功能。
          console.log("myPost:")
          data.push('处理完毕') 
          resolve(data) // 返回参数
          // resolve()不同于return, resolve()执行完成后后面的代码还会执行。
          reject('失败了')
        })
        return p
      }
    

    这个函数,假装要向后端提交申请,然后返回后端给的数据。

    const p = new Promise() 定义一个实例,简单理解,resolve 是成功的回调函数,reject 是失败的回调函数。

    注意:这里只是简单理解,实际上并不完全是这样。

    单次调用

            myPost('url1', [1,2,3]).then((data) => {
              console.log("单次调用的结果:")
              console.log(data)
            },(msg) => {
              console.log('myPost的else'+msg)
            })
    

    传入url和需要提交的数据,然后在then里面等待结果。then里面第一个方法是成功的回调,第二个方法是失败的回调。

    我们看一下运行结果:

    依次调用

            myPost('urla', [1,2,3]).then((data) => {
              console.log("第一个调用完成:")
              console.log(data)
              return myPost('urlb', data) // 发起第二次请求
            }).then((data) => {
              console.log("第二个调用完成:")
              console.log(data)
              return myPost('urlc', data) // 发起第三次请求
            }).then((data) => {
              console.log("第三个调用完成:")
              console.log(data)
              return myPost('urld', data) // 发起第四次请求
            }).then((data) => {
              console.log("第四个调用完成:")
              console.log(data)
            })
    

    有的时候需要多次向后端提交申请,而且需要前一次申请得到的数据,才能发起下一次申请。
    那么可以用这种依次申请的方式。

    先发起第一个申请,然后得到数据,然后依据数据发起第二次申请,同理可以依次发起n次申请。

    因为是得到结果才能发起下次申请,所以提交顺序和返回顺序皆可以控制。

    看一下运行结果:

    这里有个小问题,第一次访问的结果里面 console.log(data) 出来的是四个数组元素,这个是期待的,但是打开看里面却有7个。这就奇怪了。

    批量一起调用

            Promise.all([
              myPost('urla', [1,2,3]),
              myPost('urlb', [1,2,3]),
              myPost('urlc', [1,2,3])
            ]).then((data) => {
                console.log("一起调用,一起返回:")
                console.log(data)
                console.log(data[1])
            },(msg) => {
              console.log(msg)
            })
    

    有的时候,向后端发出的申请,可以一起提交,并不需要上次返回的结果,那么可以这么写,这样是不是比then.then.then的好看多了。

    那么返回的数据是啥样子的呢?是数组,顺序和上面提交的顺序是一致的。

    我们来看看结果:

    这里也有个意外,本来以为一起调用的结果,会出现在依次访问的第四次访问结果的后面。
    但是实际情况却发生了“乱入”。
    一起访问的结果,插入了依次访问的“内部”。

    这里并没有使用settimeout来模拟后端访问,本来以为都是顺序执行,但是实际并不是,估计是promise内部的一些原理导致的,先不去研究了,暂时先这样。第一步先会用,知道返回的顺序的特点。

    这里的返回结果,并没有出现数组元素数量莫名增加的情况。问题出在哪里,在继续研究。

    疑问:

    • 你可能会奇怪,这个根本就没有任何访问后端的代码嘛,忽悠人是不是?
      其实并不是,现在流行的axios就是依据promise来实现的,也就是说axios本身就是一个promise实例,相当于函数里面的p。
      我们把promise的使用方式理解了之后,使用axios实现向后端的访问,就轻松多了。
      另外这里是熟悉promise的用法,并不是熟悉axios的用法。

    • 另一个问题是,为啥要自己写个函数,直接用axios不香吗?
      这个和个人习惯有关系。我总是习惯自己再多加一层,这样函数名称、参数、返回方式就都可以归我个人来控制了,
      这样便于应对版本升级,更换第三方类库,增加自己想要的功能。
      比如我想加入前端存储的功能,提交的数据在前端 localStorage 里面保存一份的话,就可以直接在自己定义的函数里面实现,而不用在页面代码里面增加调用的函数。

  • 相关阅读:
    eclipse上传下载github
    GitHub整合idea 上传和下载
    Git安装与配置
    第八天springboot整合redis
    第七天.spring boot 整合mybatis并使用Junit进行测试
    ssm的各种配置资源
    Git相关软件下载
    Eclipse上传项目到GitHub
    SpringBoot使用spring data jpa及在页面yaml中显示
    spring boot 整合mybatis及使用Junit进行测试
  • 原文地址:https://www.cnblogs.com/jyk/p/14167808.html
Copyright © 2020-2023  润新知