如何在vue.js 2上获得响应ajax? [英] How to get response ajax on the vue.js 2?

问题描述

我的代码是这样的:

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

When the script executed, it will call checkFavoriteStore method first

通过checkFavoriteStore方法，它将在vuex存储上调用动作

By checkFavoriteStore method, it will call action on the vuex store

结果将返回响应

如何获得回复?

更新

我对vuex商店的操作是这样的:

My action on the vuex store like this :

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

推荐答案

如果返回结果，则将调用分配给一个变量，这样tyr:

if your returning a result then assign the call to a variable so tyr:

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

然后可以通过var res访问响应.我相信这些事件会把它还给您

then you can get access to the response via the var res. I believe the events will return it back to you

更多查询:

对此只是一个小问题.

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

If your getting the store ID and passing this to the component as a prop. So surely you could also pass in another prop that tells if the store has already been liked? So getting this data via the db call to the view, thus saving having to do a check after its loaded, so something like:

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

那么要使用收藏的属性来相应地更改按钮吗?，因此需要checkFavoriteStore调用并节省其他http请求等的时间

So using the favorited property to change the button accordingly?, so need for the checkFavoriteStore call and saving time on additional http request etc

不知道您的代码或代码在做什么，只是一个想法?

Don't know your code or what's its doing etc but just a thought??

添加附加信息后进行编辑

EDIT AFTER ADDITION INFO ADDED

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

OK so can you change your http request to say:

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，所以我们可以看到发生了什么.让我们看看这是否有帮助?

i have added console.logs so we can see whats happing. let's see if this helps?

还尝试在其前面添加一个返回，因为它需要返回其原始呼叫者

also try adding a return in front of, as it needs to return to its original caller

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

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

Also a comment, do you need all this complexity for just this simply check, i don't know the rest of your code and construction, but as suggested passing in the state of the button as a prop (as above) and just handle the isFavorited call within the compnent itself, so no need to use a store fo this simple request??

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

if you need to return another wahy with promise try::

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

可能是问题所在?

这篇关于如何在vue.js 2上获得响应ajax?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！