axios不发出请求，没有结果，没有错误

Posted 2023-02-22

【中文标题】axios不发出请求，没有结果，没有错误

【英文标题】：Axios not making request, no result, no error

【发布时间】：2018-07-30 23:10:03

【问题描述】：

vue2 中的 axios put 请求有问题 以下代码用于保存更新表单。

有 2 个流程调用此方法。

您单击一个组织，window.location.hash 更改为用户填写表单并单击保存的组织 ID 用户转到带有 window.location.hash 在 url (#1 (#id)) 中的组织的页面，用户填写表单并点击保存

代码：

/**
 * 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');
        
    );
,

---

结果： 如果 1 一切正常，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，它可以完美运行

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

【参考方案1】：

您应该检查是否定义了selected[0] 和this.updateForm。否则访问会抛出，所以不会调用 axios 的 then 和 catch。

【讨论】：

this.updateForm 被明确定义，因为if (this.updateForm.valid) 会抛出并且console.log(3) 不会记录。奇怪的是OP没有看到错误但可以看到日志。也许控制台显示的内容有一个过滤器（没有错误）。

promise 中确实存在错误。拒绝被调用，除了小吃店没有出现，这就是为什么我没有想到这一点。感谢您在此处和聊天中的帮助

@HMR 是的，此时没有考虑 if 子句，所以可能selected[0] 是

【参考方案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');
,

如果不使用原生 Promise，您可以改用 return this.$q.resolve()。

【讨论】：

感谢您的回答，代码确实没有多大意义，但我肯定会在功能中尝试这个

@RicardovanLaarhoven 我更新了答案，不需要使用原生承诺，您可以支持更多浏览器（Internet Explorer）而无需 polyfil，因为 Angular 已经有一个 polyfil 用于承诺。