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

Posted 2023-03-14

【中文标题】如何使用 axios all 将 axios 响应数据传递给 vue 3

【英文标题】：How to pass axios response data to vue 3 using axios all

【发布时间】：2021-08-11 15:00:09

【问题描述】：

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

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

这行绝对行不通：this.translation[Object.keys(response.data)[index]] = response.data; - 道具translation 不会发生突变，我在控制台中也没有收到任何错误，但正如我写的文本“提交了所有axois 调用" 出现在控制台中。

如果我在 axios 调用之前 改变 prop，例如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);
    );

【问题讨论】：

FWIW，all 和 spread 都已过时。这些特性在 JS 中存在已久。

你有什么提示吗，2021年如何使用多个请求？

【参考方案1】：

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>

【参考方案2】：

所以，我现在已更改为最新的 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);
  );
)

我放了一个 console.log BEFORE 和 AFTER 使对象 this.translation 发生变异，实际上，这些对象似乎在 console.log 中发生了变异，但 没有 在 Vue-Dev-Tools 中。所以我得改点别的，跟Vue里面mounted()的东西有关系吗？

【讨论】：

我必须在 axios 调用中的任何地方绑定 this 吗？

Promise.all 等是应该这样做的方式。你是说你把它放在组件之外吗？那么这是一个错误。应该在里面完成。

如果我像这样在 export 下方（所以在 axios 之前）放置一个块：this.translation["foo"] = bar: "foo" 它可以工作 - 这个是个错误，this 是那里的模块对象。

我把我的答案写在下面。

在 Promise.all 之后将 .then(function 上的函数更改为箭头函数并不能解决 this 的范围问题？