创建 vuex 操作以从两个 api 服务获取合并响应 - vue

Posted 2023-02-22

【中文标题】创建 vuex 操作以从两个 api 服务获取合并响应 - vue

【英文标题】：create vuex action to get the merged response from two api service - vue

【发布时间】：2021-06-18 20:08:35

【问题描述】：

我正在为创建类别折扣进行两次 api 调用。这里是服务

1. Api 用于类别名称（api/categories）

// 响应负载

    [
    
        "id": 1,
        "value": "Vegetables"
    ,
    
        "id": 2,
        "value": "Foods"
    ,
    
        "id": 3,
        "value": "Clothing"
    ,
]

服务

    export async function  getCategories() 
    const resp = await http.get('/categories');
    return resp.data;

2。 api 用于折扣详情(api/categories/product_id/discount)

// 响应负载

 [
    
        "category_id": 2,
        "discount": 20
    ,
    
        "category_id": 3,
        "discount": 40
    ,
    
        "category_id": 1,
        "discount": 30
    
   ]

服务

export async function  getCategoryDiscount(id) 
const resp = await http.get(`/categories/$id/discount');
return resp.data;

现在，我将其调用为 vuex 操作，并希望将这两个合并为一个状态。

喜欢的状态会是

Categories: [ id: 1, category: "vegetables", discount: 30,...]

Vuex 操作（如 muka 建议的那样）

    async fetchCategoriesWithDiscount(commit,state) 
     
    const productId = state.products.pros.key_details.product_id;
   const catResponse = await service.getCategories();
   const disResponse = await service.getCategoryDiscount(productId);
   console.log(catResponse,disResponse); // getting data correctly
   const allResponse = 
      Promise.all([catResponse,disResponse]).then(async(result)=> 
           const categories = await result[0].json(); // error is coming here
           const discount = await result[1].json();
           commit('updatedFetchCategories',
              categories,
              discount
           );
       );
     console.log(allResponse);
   

如何配置动作以使类别状态为折扣？我收到错误 "Uncaught (in promise) TypeError: result[0].json is not a function"

【问题讨论】：

问题是你混合匹配async 和Promise：它们不能像你把它们放在一起那样一起工作。例如。查看getCategories() 函数返回的内容 - 它是Promise 还是真实数据？如果是Promise，则可以放在Promise.all，如果是数据，则不能。然后，resp.data.json() 不应该存在（大部分时间）。 .json() 是fetch() 的一个方法。如果你不使用fetch()，那么它就不存在。您必须自定义 Promise.all 中的函数以适应您正在处理的数据。我的 sn-p 只是一个例子。

是的明白这一点。我得到的数据不是承诺......我正在考虑如何将两个响应数据添加到一个......

是的，我也改变了它......它现在正在工作。

很高兴听到它现在可以工作了！ :)

【参考方案1】：

有一些方法可以做到这一点，具体取决于您的喜好。如果你真的想只在所有数据都到达时更新状态，我建议你使用Promise.all 方法（更多关于Promise.all）：

const initialState = () => (
  postsWithComment: [],
)

const store = new Vuex.Store(
  state: initialState(),
  mutations: 
    UPDATE_POST(state, 
      post,
      comments
    ) 
      state.postsWithComment.push(
        ...post,
        comments,
      )
    ,
  ,
  actions: 
    fetchPostsAndComments(
      commit
    ) 
      const postResponse = fetch('https://jsonplaceholder.typicode.com/posts/1')
      const commentResponse = fetch('https://jsonplaceholder.typicode.com/posts/1/comments')

      // Promise.all in the action:
      const response = Promise.all([postResponse, commentResponse])
        .then(async(results) => 
          const 
            id,
            title
           = await results[0].json()
          const comments = await results[1].json()
          commit("UPDATE_POST", 
            post: 
              id,
              title
            ,
            comments
          )
        )
        // add a catch here, so you catch
        // the error of the fetches
        .catch(err => 
          console.error(err)
        )
    
  ,
)

new Vue(
  el: "#app",
  store,
  methods: 
    getPostsWithComments() 
      this.$store.dispatch("fetchPostsAndComments")
    ,
  ,
  template: `
    <div>
      <button @click="getPostsWithComments">GET DATA</button>
      <hr>
       $store.state.postsWithComment 
    </div>
  `
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>

【讨论】：

感谢您的回复....我收到错误消息。“未捕获（承诺）类型错误：结果 [0].json 不是函数”。承诺也未决。

我已经用你的建议更新了我的问题，但我没有出现功能错误

@user7411584 那么您的代码中还有其他一些错误。可以看到 sn -p 工作正常。我编辑了代码，所以现在它有一个catch() 分支，所以它会尝试提供错误处理。此外，您的代码中没有使用fetch()，而是http.get。 fetch() 返回 Promise，而 http.get 不返回。您必须重新设计您的“服务”，以便它们可以与 Promise.all 一起使用。