在 vuex 中嵌套 promise，为什么？

Question

我正在维护我以前的程序员的 vue 代码。

我在他的 vuex 模块中找到了这段代码。

import axios from "axios";
import qs from "qs";
import httpi from "../httpInstance";  // this is just a wrapper for axios

const getPromise = (context, url) => {
  return new Promise((resolve, reject) => {
    httpi.get(url).then(
      (response) => {
        resolve(response);
      },
      (error) => {
        reject(error);
      }
    );
  });
};

// same repeated for 'put', 'post' etc...

我想知道他为什么要这样嵌套承诺。

在 ACTIONS 中，他使用此包装器调用后端 API，如下所示。

const actions = {
  [ACT_GET_ALL_RULESOURCE]: function (context) {
    return getPromise(context, `${APIURLPREFIX}/polapi/api/rulesource`);
  },

他这样做的目的是什么？

我很困惑，因为 axios(httpi) 本身已经是一个承诺。这里有什么意义？

**编辑

在 Vue 组件 methods 中，他使用如下所示的操作。

getAllRulesource() {
  this.$store.dispatch(`rules/${ACT_GET_ALL_RULESOURCE}`)
    .then((res) => {
      this.rulesourceList = res.data;
    })
    .catch((err) => {
      this.msg = "Cannot GET rulesource";
    })
}

Answer 1

之前的开发者对 promises 的理解不够透彻。由于 httpi returns 似乎是一个承诺（OP 代码在其上调用 then），函数 getPromise 可以而且应该重写为...

const getPromise = (context, url) => {
  return httpi.get(url);
};

或完全删除。 would-have-been 来电者只需说...

httpi.get('http...').then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
})

在声明为 async 的函数中，更现代的调用方语法是...

try {
  const response = await httpi.get('http...');
  console.log(response);
} catch(error) {
  console.log(error);
}

在 vuex 中嵌套 promise，为什么？

nesting promises in vuex, why?

javascript

promise

vue.js

vuex