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

我的代码是这样的：

<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>

执行脚本时，它将首先调用checkFavoriteStore方法

通过checkFavoriteStore方法，它将在vuex存储上调用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)
        );
    }
}

最佳答案

如果返回结果，则将调用分配给变量，这样：

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

那么您可以通过var res访问响应。我相信活动会把它还给您

更多查询：

对此只是一个小问题。

如果您获得商店ID并将其作为道具传递给组件。因此，您当然也可以传递另一个道具来告诉商店是否已被喜欢？因此，可以通过对视图的db调用获取此数据，从而省去了在加载后进行检查的麻烦，例如：

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

因此，要使用收藏的属性来相应地更改按钮吗？，因此需要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)
        }
    )

还有一条评论，您是否需要所有这种复杂性来进行简单的检查，我不知道您的其余代码和构造，但是建议将按钮的状态作为道具传递（如上），然后处理组件本身内部的isFavorited调用，因此无需为此简单请求使用商店？

编辑2：

如果您需要以承诺返回另一个原因，请尝试：:

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?
  });

可能是问题所在？？