Promise 之初探

陈旧的知识应该更新一下了，先尝试一下 Promise ，主要参考 http://www.javashuo.com/article/p-ynqqhjop-by.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 里面保存一份的话，就能够直接在本身定义的函数里面实现，而不用在页面代码里面增长调用的函数。