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 里面保存一份的话，就可以直接在自己定义的函数里面实现，而不用在页面代码里面增加调用的函数。