(axios) HTTP POST 请求两分钟后失败，Laravel 5 + VueJS
Posted
技术标签:
【中文标题】(axios) HTTP POST 请求两分钟后失败，Laravel 5 + VueJS【英文标题】：(Axios) HTTP POST request failed after two minutes, Laravel 5 + VueJS 【发布时间】：2019-11-06 06:13:18 【问题描述】：我正在尝试为特定用户复制数据库中的数据。应该复制将近 1000 行。但是我的请求在 2 分钟后因空响应而失败。你可以在图片中看到。我无法确定问题所在。如果有人已经解决了此类问题，请指导我。
我的数据库托管在 Google Cloud Storage 上，我使用的是 mysql。
这是我的控制器方法：
public function createDataForManyToMany (Request $request)
$rows = TableA::where('id_analysis',
$request->analysis_id)->get();
$files_data = TableB::Where('id_analysis',
$request->analysis_id)->get();
foreach ($rows as $row)
$row->input_files()->saveMany($files_data);
return response()->json([
'status' => 'ok',
'analysis_id' => $request->analysis_id
]);
我的 Axios 发帖请求：
axios.post('/app/create-det-infiles-data', '_token': this.csrf_token, 'analysis_id': res.data.analysis_id)
.then( res =>
if (res.data.status === 'ok')
this.signupTried = false
this.emailSent = true
Vue 组件：
<template>
<div class="fullwidth-container">
<div class="login-container">
<v-card class="login_form elevation-9">
<form class="login">
<input type="hidden" name="_token" :value="csrf_token"/>
<div class="header">
<h1>PIX2MAP SignUp</h1>
</div>
<v-text-field
color="dark"
prepend-icon="person"
:label="$t('name')"
required
:error-messages="nameErrors"
v-model="name">
</v-text-field>
<v-text-field
color="dark"
prepend-icon="email"
label="Email"
required
:error-messages="emailErrors"
v-model="email">
</v-text-field>
<v-text-field
color="dark"
prepend-icon="***_key"
:append_icon="show_pass ? 'visibility_off' : 'visibility'"
:type="show_pass ? 'text' : 'password'"
:error-messages="passwordErrors"
required
:label="$t('password')"
v-model="password"
@click:append="show_pass = !show_pass">
</v-text-field>
<v-text-field
class="pwd-confirm"
color="dark"
:append_icon="show_pass ? 'visibility_off' : 'visibility'"
:type="show_pass2 ? 'text' : 'password'"
:error-messages="repeatPasswordErrors"
required
:label="$t('repeat_password')"
v-model="password2"
@click:append="show_pass = !show_pass">
</v-text-field>
<v-layout row style="margin: 0">
<v-flex shrink style="margin-top: 0">
<v-checkbox
v-model="termsAccepted"
:label="`I accept the `"
:error-messages="acceptAgreementError"
>
</v-checkbox>
</v-flex>
<v-flex grow text-xs-left style="margin-top: 0">
<a href='#' style="color: #0f81cc; margin-left: 5px; padding-top: 5px;" @click="changeState">contract</a>
</v-flex>
</v-layout>
<v-btn class="btn-signup" color="accent" @click="doSignup"
:disabled="formFilled"
>Confirm <span class="float-right" :class="'fas':signupTried, 'fa-spinner':signupTried, 'fa-spin':signupTried"></span>
</v-btn>
<p class="privacy"> $t('form_privacy') </p>
</form>
</v-card>
<div class="back">
<v-btn flat @click="$emit('back')"><v-icon>arrow_back</v-icon> $t('back_button') </v-btn>
</div>
</div>
<v-dialog
v-model="dialog"
max-
>
<v-card>
<v-card-title class="headline grey lighten-2"> contractTitile
<span style="margin-left: auto"><v-icon right @click="dialog = !dialog">fas fa-times</v-icon></span>
</v-card-title>
<v-card-text >
contractBody
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar
v-if="signupTried"
v-model="snackbar"
dark
:bottom="y === 'bottom'"
:timeout="timeout"
:left="x === 'left'"
:color="color"
:multi-line="mode === 'multi-line'"
:right="x === 'right'"
:top="y === 'top'"
:vertical="mode === 'vertical'"
>
text
</v-snackbar>
<v-snackbar
v-if="emailSent"
v-model="emailSnackbar"
:bottom="y === 'bottom'"
:timeout="timeout"
:left="x === 'left'"
:multi-line="mode === 'multi-line'"
:right="x === 'right'"
:top="y === 'top'"
:color="color"
:vertical="mode === 'vertical'"
>
emailSentMessage
</v-snackbar>
</div>
</template>
<script>
import required, email from 'vuelidate/lib/validators'
import TITLE, BODY_TEXT from '../contract'
import axios from 'axios'
export default
props:
csrf_token: String,
name: String,
email: String,
,
data: () => (
contractTitile: TITLE,
contractBody: BODY_TEXT,
show_pass: false,
show_pass2: false,
name: '',
email: '',
password: '',
password2: '',
signupTried: false,
emailExist: false,
dialog: false,
termsAccepted: false,
snackbar: true,
y: 'bottom',
x: null,
mode: '',
timeout: 10000,
color: '#fff',
text: 'This process will take some time, please! be patience.',
emailSent: false,
emailSnackbar: true,
emailSentMessage: 'We have sent you instructions, please verify your account by visiting your email.'
),
validations:
name:
required
,
email:
required,
email
,
password:
required
,
password2:
required
,
termsAccepted:
required
,
methods:
async doSignup ()
this.signupTried = true
if (this.$v.name.required && this.$v.email.required && this.$v.email.email && this.$v.password.required && this.termsAccepted )
axios.post('/app/register', '_token': this.csrf_token, 'name': this.name,'email': this.email, 'password': this.password )
.then(res =>
if (res.data.status === 'ok')
axios.post('/app/create-in-files-data', '_token': this.csrf_token, 'analysisIds': res.data.analysis_ids)
.then(resp =>
if (resp.data.status === 'ok')
axios.post('/app/create-mo-files-data', '_token': this.csrf_token, 'analysisIds': resp.data.analysis_ids)
.then( res =>
if (res.data.status === 'ok')
// window.location = '/'
// this.signupTried = false
// this.emailSent = true
axios.post('/app/create-det-infiles-data', '_token': this.csrf_token, 'analysis_id': res.data.analysis_id)
.then( res =>
if (res.data.status === 'ok')
this.signupTried = false
this.emailSent = true
// await axios.post('/app/create-det-mofiles-data', '_token': this.csrf_token, 'analysis_id': res.data.analysis_id, demo: true)
// .then(async res =>
// if (res.data.status === 'ok')
// this.showSpinner = false
// window.location = '/'
// else
// console.log('Files not created')
// this.showSpinner = false
// this.$emit('forgotPw', email: this.email);
//
// )
// .catch(e =>
// console.log('2nd error', e)
// )
else
console.log('Files not created')
this.showSpinner = false
this.$emit('forgotPw', email: this.email);
)
.catch(e =>
console.log('2nd error', e)
)
else
console.log('Signup Failed')
this.signupTried = false
this.$emit('forgotPw', email: this.email);
)
.catch(e =>
console.log('2nd error', e)
)
else
console.log('Files not created')
this.showSpinner = false
this.$emit('forgotPw', email: this.email);
)
.catch(e =>
console.log('Error: ', e)
)
else
this.showSpinner = false
this.$emit('forgotPw', email: this.email);
)
,
changeState ()
this.dialog = !this.dialog
,
computed:
nameErrors ()
if (this.signupTried && this.name.length == 0 && !this.$v.name.required) return [this.$t('name_required')]
,
emailErrors ()
const errors = []
if (this.signupTried && !this.$v.email.required) errors.push(this.$t('email_required'))
if (!this.$v.email.email) errors.push(this.$t('not_valid_email'))
if (this.emailExist) errors.push(this.$t('existing_email'))
return errors
,
passwordErrors ()
if (this.signupTried && !this.$v.password.required) return [this.$t('password_required')]
,
repeatPasswordErrors ()
if (this.signupTried && !this.$v.password2.required) return [this.$t('password_required')]
if (this.password2 != this.password) return [this.$t('passwords_not_equal')]
,
acceptAgreementError ()
if (this.signupTried && !this.$v.termsAccepted.required) return [this.$t('agreement_required')]
,
formFilled ()
if (!this.$v.name.required || !this.$v.email.required || !this.$v.password.required || !this.$v.password2.required || !this.termsAccepted || (this.password != this.password2))
return true
else
return false
</script>
<style scoped lang="stylus">
@import '../../stylus/theme.styl'
.fullwidth-container
width: 100%;
height: 100%;
background: $bg-login;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
.login-container
position: relative;
width: 500px;
top: 25px;
margin: auto;
.login_form
padding: 16pt;
text-align: center;
height: 800px;
*
margin-top: 24pt;
.header
margin: 24pt;
.i-am
display: flex;
flex-direction: row;
align-items: center;
*
margin-top: 0pt;
span
width: 8%;
.i-am-text
margin-right: 20px;
.i-am-select
margin-left: 5%;
.btn-signup
margin-left: auto;
margin-right: auto;
width: 80%;
.privacy
margin-top: 8pt;
font-style: italic;
.pwd-confirm
margin-left: 7%;
.checkboxAccept
display: inline;
.float-right
margin-top: -3px;
margin-left: 5px;
color: #fff;
font-size: 18px;
</style>
【问题讨论】：
你能用 axios 的 HTTP 请求分享你的控制器方法吗？ @Thamerbelfkih 我在我的问题中添加了我的控制器和发布请求。请看一下。 对于axios的帖子，请把vue组件全部贴出来 组件已添加。 @Thamerbelfkih 您是否在 Cloud SQL 实例上看到任何错误？您可以按照this 和this 来检查您的日志。 【参考方案1】：此问题可能是由于 MySQL 实例已达到查询的超时限制。
在 Cloud SQL 中，您可以尝试修改标志“wait_timeout”并设置更大的值，例如 50000。
选中此link 作为在 Cloud SQL 实例中设置标志的参考。
【讨论】：
以上是关于(axios) HTTP POST 请求两分钟后失败，Laravel 5 + VueJS的主要内容，如果未能解决你的问题，请参考以下文章