VUE大家能讲讲为什么这个axios的为什么外面又套了一个promise？

Question

axios返回的response.data可以拿来用了 但是为什么外面又套了一层promise？
用的时候还要这样去写这样不是更麻烦了吗？？昨天遇到的这个问题 刚才看到一个人提问了差不多的问题 但是那个人没有贴代码 我贴上代码大家能解释一下为什么要这样做吗？谢谢

get().then(data => {
   console.log(data)
})
  

export function get (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params: data})
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
}

Answer 1

包一层Promise多此一举 完全没必要

export function get (url, data = {}) {
  return axios.get(url, {params: data}).then((res)=>res.data)
}

Promise.prototype.then

• 如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
• 如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
• 如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
• 如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
• 如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

Answer 2

1.一般项目架构会将axios模块抽取为一个独立的模块,文件功能单一原则,便于维护
2.代码中利用new Promise的then接收axios的resolve值
这样get方法后就可以直接在另一功能代码中

get().then(data=>{
    //data对应axios请求的response
})

3.如果利用return是没法拿到response值,因为axios是基于promise的库

Answer 3

看了别的答案，发现自己并没有很好理解这个问题，因为如果他要直接操作responsive.data，它应该这样写而不是再次封装一层promise。

function execute (method, resource, data) {
  return axios({
    method,
    url: resource,
    data,
  }).then(req => {
    return req.data
  })
}

console.log(execute())

[object promise]

Answer 4

可以增加js引擎gc负担，为将来向甲方要钱预留优化空间
还增加了冗余代码，可以减少代码可读性增加维护难度，让公司轻易不敢炒自己鱿鱼