我有一个日期范围的过滤选项,每次更改时我都会运行数据的API调用.

问题是,如果用户在其他人加载之前不断快速更改日期范围,我不希望用户能够堆叠API调用.

我使用单个文件vue组件,并为每个API调用提供一个方法,然后使用一个方法对这些组进行分组和调用.

watch: {
    datefilter: function() {
        this.initStatModules();
    }
},methods: {
    getCustomers: function() {
        var $this = this;
        return axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/customers?date=${$this.datefilter}`).then(function(response) {
            $this.customers = response.data;
        });
    },getBookings: function() {
        var $this = this;
        return axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/bookings`).then(function(response) {
            $this.bookings = response.data;
        });
    },getTotalRevenue: function() {
        var $this = this;
        return axios.get(`/api/v1/reports/${$this.team.id}/services-revenue?date=${$this.datefilter}`).then(function(response) {
            $this.totalRevenue = response.data.data.totalRevenue;
        });

    },initStatModules: function() {
        this.getCustomers();
        this.getBookings();
        this.getTotalRevenue();
    }
}

我希望能够做的是取消watch或initStatModules方法中的所有挂起的API请求.

看看axios docs：https://github.com/axios/axios#cancellation它是受支持的,但是我无法理解如何按照我的意愿实现它.

谢谢！

<template>
  <input type="date" :disabled="isdisabled" v-model="datefilter">
</template>

<script>
export default {
  data () {
    return {
      datefilter: null,modulesLoaded: 0,isdisabled: false
    }
  },watch: {
    datefilter () {
      this.initStatModules()
    }
  },methods: {
    getCustomers () {
      axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/customers?date=${$this.datefilter}`)
        .then(response => {
          this.customers = response.data
          this.onModuleLoaded()
        })
    },getBookings () {
      axios.get(`/api/v1/reports/${$this.team.id}/stats-dashboard/bookings`)
        .then(response => {
          this.bookings = response.data
          this.onModuleLoaded()
        })
    },getTotalRevenue () {
      axios.get(`/api/v1/reports/${$this.team.id}/services-revenue?date=${$this.datefilter}`)
        .then(response => {
          this.totalRevenue = response.data.data.totalRevenue
          this.onModuleLoaded()
        })
    },initStatModules () {
      this.isdisabled = true
      this.modulesLoaded = 0
      this.getCustomers()
      this.getBookings()
      this.getTotalRevenue()
    },onModuleLoaded () {
      this.modulesLoaded++
      if (this.modulesLoaded === 3) {
        this.isdisabled = false
      }
    }
  }
}
</script>

试试这个.

假设我的返回URL是/ Admin / HealthCheck(它确实是).当我调试时,我从重定向调用中获取了一个类似http：// localhost：3279 / Admin / HealthCheck的URL.

然后,我将我的应用程序部署到http：// localhost / Test.在这种情况下,Redirect(returnUrl)将我重定向到http：// localhost / Admin / HealthCheck而不是预期的http：// localhost / Test / Admin / HealthCheck.

这里发生了什么？我该如何解决这个问题(如果它是可修复的)？

以下是(标准)MVC3 AccountController的片段;你可以看到我从查询字符串中获取返回URL的位置(例如,http：// localhost / Test / logon？ReturnUrl = / Admin / HealthCheck,尽管是URL编码的).

[HttpPost]
        public ActionResult logon(logonModel model,string returnUrl)
        {
            if (ModelState.IsValid)
            {
                if (Membership.ValidateUser(model.UserName,model.Password))
                {
                    returnUrl = Request.Params["ReturnUrl"];

                    FormsAuthentication.SetAuthCookie(model.UserName,model.RememberMe);
                    if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
                        && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
                    {
                        return Redirect(returnUrl);
                    }
                    else
                    {
                        return RedirectToAction("Index","Home");
                    }
                }
                else
                {
                    ModelState.AddModelError("","The user name or password provided is incorrect.");
                }
            }

(in my case,I set it manually)

你还没有真正展示过这种手动设置是如何发生的,但如果你已经硬编码了一个url,例如/ Admin / HealthCheck而不是使用url helper来生成这个url,例如Url.Action(“HealthCheck”,“Admin”)不要指望奇迹发生.

你的logon很好.它做了它应该做的事情=>它重定向到作为参数传递的url.您的问题在于您设置此网址的方式.

结论：在ASP.NET MVC应用程序中,在处理url时总是使用url helper.永远不要硬编码.