Question

我在vue2中遇到了axios put请求的问题以下代码用于保存更新表单。

有两个流程可以调用此方法。

点击某个组织，window.location.hash更改为organisationId用户填写表单并点击保存
用户进入页面，组织中的url（＃1（#id）中有一个window.location.hash用户填写表单，然后点击保存

代码：

/**
 * Handle the update form.
 *
 * @param {array} selected
 * @return {Promise}
 */
update(selected) {
    this.$refs.updateForm.validate();
    console.log('1');
    return new Promise((resolve, reject) => {
        console.log('2');
        if (this.updateForm.valid) {
            console.log('3');
            this.$http
                .put('organisation/' + selected[0].id, this.updateForm.values)
                .then(() => {
                    console.log('10');
                    resolve();
                })
                .catch(error => {
                    console.log('NO');
                    console.log(error)
                });
            console.log('4');
        }
    });
},

结果：如果一切正常，console.log：

OrganisationResource.vue?2497:135 1
OrganisationResource.vue?2497:138 2
OrganisationResource.vue?2497:140 3
OrganisationResource.vue?2497:151 4
OrganisationResource.vue?2497:144 10

如果情况2不起作用，则不会发出请求，console.log：

OrganisationResource.vue?2497:136 1
OrganisationResource.vue?2497:138 2
OrganisationResource.vue?2497:140 3

同样在案例2中，axios请求拦截器中的console.log不是触发。在流程2之后，您在没有页面刷新的情况下启动流程1，它完美地运行

我也不知道如何进一步调试它。

Answer 1

您应该检查selected[0]＆amp; this.updateForm已定义。否则，对它的访问将会抛出，因此不会调用then和catch的axios。

Answer 2

您可以尝试以下操作，它反映了您的代码正在执行的操作，即使它没有多大意义：

/**
 * Handle the update form.
 *
 * @param {array} selected
 * @return {Promise}
 */
update(selected) {
  return Promise.resolve()//switch to native promises
  .then(
    ()=>{
      //any error will be caught with the .catch, no unprotected code
      //  function will always return a promise that resolves to undefined
      this.$refs.updateForm.validate();
      console.log('1');
      console.log('2');
      if (this.updateForm.valid) {
        console.log('3');
        return this.$http
          .put('organisation/' + selected[0].id, this.updateForm.values);
      }//return undefined if not valid
    }
  ).then(result => {
      console.log('10');//resolve with undefined if valid or invalid without error
  }).catch(
    error => {//resolve to undefined with error
      console.log('NO');
      console.log(error)
  });
  console.log('4');
},

如果不使用原生承诺，您可以使用return this.$q.resolve()代替。

Axios没有提出请求，没有结果，没有错误

2 个答案: