javascript - 如何在 vue.js 2 上获取响应 ajax？

Question

我的代码是这样的:

<template>
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)">
        <span class="fa fa-heart"></span>&nbsp;Favorite
    </a>
</template>

<script>
    export default{
        props:['idStore'],
        mounted(){
            this.checkFavoriteStore()
        }, 
        methods:{
            addFavoriteStore(event){
                alert('tost');
                event.target.disabled = true
                const payload= {id_store: this.idStore}
                this.$store.dispatch('addFavoriteStore', payload)
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            },
            checkFavoriteStore(){
                const payload= {id_store: this.idStore}
                this.$store.dispatch('checkFavoriteStore', payload)
                setTimeout(function () {
                   location.reload(true)
                }, 1500); 
                //get response here  
            }
        }
    }
</script>

脚本执行时，会先调用 checkFavouriteStore 方法

通过checkFavoriteStore方法，它会调用vuex store上的action

结果会返回响应

如何获得回复？

更新

我在 vuex 商店上的操作如下:

import { set } from 'vue'
import favorite from '../../api/favorite'
import * as types from '../mutation-types'

// actions
const actions = {
    checkFavoriteStore ({ dispatch,commit,state },payload)
    {
        favorite.checkFavorite(payload,
            data => {
                commit(types.CHECK_FAVORITE_SUCCESS)
            },
            errors => {
                commit(types.CHECK_FAVORITE_FAILURE)
                console.log(errors)
            }
        )
    }
}

// mutations
const mutations = {
    [types.CHECK_FAVORITE_SUCCESS] (state){
        state.addStatus = 'success'
    },
    [types.CHECK_FAVORITE_FAILURE] (state){
        state.addStatus = 'failure'
    }
}

export default {
    actions,
    mutations
}

API 像这样:

import Vue from 'vue'
import Resource from 'vue-resource'

Vue.use(Resource)

export default {

    // api check favorite exist or not
    checkFavorite (favorite, cb, ecb = null ) {
        Vue.http.post(window.Laravel.baseUrl+'/member/store/favorite/check-favorite', favorite)
            .then(
            (resp) => cb(resp.data),
            (resp) => ecb(resp.data)
        );
    }
}

Answer 1

如果您返回结果，则将调用分配给变量，以便:

  var res = this.$store.dispatch('checkFavoriteStore', payload);

然后您可以通过 var res 访问响应。我相信事件将会把它还给你

更多查询:

对此有一个小问题。

如果您获取商店 ID 并将其作为 Prop 传递给组件。那么你当然也可以传递另一个 Prop 来告诉商店是否已经被喜欢了？因此，通过对 View 的数据库调用来获取这些数据，从而节省了在加载后进行检查的时间，例如:

  <favorite-button :storeid="23" :favorited="true"></favorite-button>

因此使用 favorited 属性来相应地更改按钮？因此需要 checkFavoriteStore 调用并节省额外 http 请求等的时间

不知道你的代码或它在做什么等，但只是一个想法？

添加信息后编辑

好的，您可以将 http 请求更改为:

Vue.$http.post(window.Laravel.baseUrl+'/member/store/favorite/check-favorite', favorite)
  .then((response) => {
      console.log('success')
      console.log(response.data);
    return response.data;
  }, (response) => {
       console.log('success');
        console.log(response);
    return response;
  });

我添加了console.logs，这样我们就可以看到发生了什么。让我们看看这是否有帮助？

还可以尝试在前面添加一个 return，因为它需要返回到其原始调用者

 return favorite.checkFavorite(payload,
        data => {
            commit(types.CHECK_FAVORITE_SUCCESS)
        },
        errors => {
            commit(types.CHECK_FAVORITE_FAILURE)
            console.log(errors)
        }
    )

还有一条评论，您是否需要所有这些复杂性来进行简单的检查，我不知道您的其余代码和构造，但按照建议将按钮的状态作为 Prop 传递(如上所述)并且只需在组件本身内处理 isFavorited 调用，因此无需使用存储来处理这个简单的请求？

编辑2:

如果你需要用promise尝试返回另一种方式::

Vue.$http.post(window.Laravel.baseUrl+'/member/store/favorite/check-favorite', favorite)
  .then((response) => {
      console.log('success')
      resolve(response.data);// replace the return with resolve?
  }, (response) => {
       console.log('success');
        console.log(response);
    reject(response.data);// replace the return with reject?
  });

可能是问题所在？