axios提交表单后发送的请求过多

Posted 2023-02-22

【中文标题】axios提交表单后发送的请求过多

【英文标题】：Axios send too multiples request after submiting the form

【发布时间】：2020-04-18 18:01:57

【问题描述】：

我开始使用 Laravel 和 Nuxt Js 进行小型项目，因此我创建了一个小型 for 在数据库中添加用户。一切顺利，我有一个小问题，我的 axios 脚本像循环一样发送多个请求：

这是完整的代码：

<script>

import $ from 'jquery'
import Swal from 'sweetalert2'
import toastr from 'toastr'
import Vue from 'vue'
Vue.component('pagination', require('laravel-vue-pagination'))

export default 
  layout: 'app',
  data () 
    return 
      laravelData: ,
      formFields: ,
      search: null,
      refresh: false
    
  ,
  watch: 
    refresh () 
      this.store()
      this.refresh = false
    
  ,
  mounted () 
    $('a.just-kidding').hide()
    this.index(1)
  ,
  methods: 
    index (page = 1) 
      this.$axios.$get('/customer?page=' + page).then((response) => 
        this.laravelData = response
        this.refresh = true
      )
    ,
    store () 
      const formData = $('#add-customer').serialize()
      return this.$axios.$post('/customer/store', formData).then((response) => 
        this.refresh = true
      )
    ,
    find () 
      if (this.search === '') 
        this.index()
       else 
        this.$axios.$get('/customer/find?customer=' + this.search).then((response) => 
          this.laravelData = response
        )
      
    ,
    destroy (customerId) 
      Swal.fire(
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      ).then((result) => 
        if (result.value) 
          // this.$Progress.start();
          this.$axios.$get('/customer/destroy?customer=' + customerId).then((response) => 
            if (response.success) 
              toastr.success(response.error, 'Ahoy Hoy !!',  'positionClass': 'toast-top-left' )
              this.refresh = true
             else 
              toastr.error(response.error, 'Owh :( !!',  'positionClass': 'toast-top-left' )
            
          )
          // this.$Progress.finish();
        
      )
    
  

</script>

这是我的控制器：

public function store(Request $request)


    DB::transaction(function () use ($request)
        $customerQuery = Customer::create($request->post('general'))->id;
        $shippingInfos = array_merge(array('customer_id' => $customerQuery), $request->post('address'));
        $shippingQuery = Shipping::create($shippingInfos);
        return true;
    );

我在我的 laravel 中创建了一个名为 cors 的中间件页面，

    <?php

namespace App\Http\Middleware;

use Closure;

class Cors

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    
        return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    

【问题讨论】：

您提供的代码没有提供足够的上下文说明问题可能源自何处...也许您可以添加更多代码示例...

我在这里看不到任何本质上的错误。要求都一样吗？你是怎么调用 store() 的？

多重请求是什么？它实际上是多个 POST 请求，还是一个 OPTIONS 后跟一个 POST？如果是后者，那很正常。这是因为 CORS 和飞行前请求。

@MattU 可以，你仔细检查我的问题，刚刚编辑过

是无限循环吗？如果是这样，可能是因为您在该属性的观察程序中设置了this.refresh。一个观察者函数可以有两个参数newValue 和oldValue。在处理 watcher 方法中的动作之前检查值是否不同通常是个好主意。

【参考方案1】：

  watch: 
    refresh () 
      this.store()
      this.refresh = false
    
  ,

这将导致无限循环，因为您正在 监控 this.refresh 的监视函数中更改 this.refresh，这将重新触发监视函数，这将更改它，会触发watcher，它会改变它，它会触发watcher，它会改变它，它会触发watcher，它会改变它，它会触发watcher，它会改变它......

你明白了。

【讨论】：

你好，我如何在提交表格后更新我的表格，请问有其他方法或建议