javascript - axios 提交表单后发送太多请求

Question

我开始使用 Laravel 和 Nuxt Js 做一个小项目，所以我创建了一个小项目来在数据库中添加用户。一切顺利，我有一个小问题，我的 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>

这是我的 Controller :

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

Answer 1

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

这将导致无限循环，因为您正在监视 this.refresh 的观察器函数中更改this.refresh，这将重新触发监视功能，这将改变它，这将触发观察者，这将改变它，这将触发观察者，这将改变它，这将触发观察者，这将改变它，这将触发观察者，这将改变它......

你明白了。