如何使用 axios all 将 axios 响应数据传递给 vue 3

Question

我正在尝试使用 axios 进行多个请求，并将响应保存在 vue 3 道具中。 我知道不要改变道具，但这是另一个讨论。 因为translation是 object（变量通过引用传递），所以在这里应该可以对其进行变异。

正如我正确理解的那样， axios.all()一次发出多个异步请求。 这里的代码工作正常，axios 请求成功发出，我可以在then()代码中console.log(response.data)它们。 到目前为止，一切都很好。

绝对行不通的是这一行： this.translation[Object.keys(response.data)[index]] = response.data; - 道具translation不会发生变异，并且我在控制台中没有收到任何错误，但是当我编写文本“提交所有 axois 调用”时出现在控制台中。

如果我在 axios 调用之前改变道具，例如this.translation["foo"] = { bar: "foo" }它可以工作。

我在这里做错了什么？ 如何将此处的数据从 axios-response 传递给 prop 变量translation ？

export default {
  props: {
    marketplaces: Object,
    translation: Object,
  } 
}

let requests = [axios1, axios2, ...]

axios
    .all(requests)
    .then(
        axios.spread((...responses) => {
            responses.forEach((response, index) => {
                this.translation[Object.keys(response.data)[index]] = response.data;
            });
            console.log("submitted all axios calls");
        })
    )
    .catch((error) => {
        console.log("ERRRR:: ", error.response.data);
    });

Answer 1

所以，我现在已经更改为像最新的 axios 文档这样的代码，显示多个帖子请求，并更改了这一行.then((results) => {所以现在this范围是正确的。

export default {
  props: {
    marketplaces: Object,
    translation: Object,
  } 
}

let requests = [axios1, axios2, ...]

Promise.all(requests)
.then((results) => {
  results.forEach((result, index) => {
    // I get the CORRECT result here
    console.log("BEFORE:");
    console.log(this.translation);

    this.translation[Object.keys(result.data)[index]] = result.data;

    console.log("AFTER:");
    console.log(this.translation);
  });
})

我在改变 object this.translation之前和之后放置了一个console.log ，实际上，对象似乎在 console.log 中发生了变异，但在 Vue-Dev-Tools 中没有。 所以我得改点别的，和Vue中的mounted()有关系吗？

Answer 2

export default {
  // Persistent Layout for Menu and Header
  layout: (h, page) => h(Layout, [page]),
  layout: BreezeAuthenticatedLayout,

  components: {
    BreezeAuthenticatedLayout,
    FormButton,
    FormInput,
    FormSelect,
    FormRadio,
    MarketplaceForm,
  },

  setup() {
    const form = useForm({
      asin: "1234567890", //null,
      sourceMarketplace: "de", //null,
      formality: "default",
    });

    return { form };
  },
  props: {
    marketplaces: Object,
    translation: Object,
  },
  methods: {
    submit() {
      this.form.post(
        "/translation/fetch-listing",
        {
          onSuccess: (page) => {
            console.warn("Now translate:");
            this.translateAll();
          },
        }
      );
    },
    translateAll() {
      let requests = [];
      Object.keys(this.marketplaces).forEach((value, index) => {
        if (this.form.sourceMarketplace === value) return;

        let postData = {
          sourceMarketplace: this.form.sourceMarketplace,
          targetMarketplace: value,
          formality: this.form.formality,
          translation: this.translation,
        };

        let newPromise = axios({
          method: "post",
          url: "/translation/translate",
          data: postData,
        });

        requests.push(newPromise);
      });

      Promise.all(requests)
        .then((results) => {
          results.forEach((result, index) => {
            console.log(index);
            console.log("translation before: ");
            console.log(this.translation);
            this.translation[Object.keys(result.data)[index]] =
              result.data[Object.keys(result.data)[index]];
            console.log("translation after: ");
            console.log(this.translation);
          });
        })
        .catch((error) => {
          console.log("Axios error: ");
          console.error(error);
        });
    },
  },
};
</script>