首页 > 解决方案 > axios函数调用不会返回数据

问题描述

我确定这是我的理解/实施的问题。问题是我试图将创建的对象的 ID 返回到一个数组中,以便以后可以将数组插入到另一个对象中。在函数、调用之间移动 .then() 似乎没有任何效果。推送到数组,通过索引将值分配给数组似乎不起作用。任何关于根本问题是什么以及解决问题的途径的见解/指导都值得赞赏。

index.js

const contacts = document.getElementsByName('newContact');
const contactName = document.getElementsByName('contactName');
const contactTitle = document.getElementsByName('contactTitle');
const contactPhone = document.getElementsByName('contactPhone');
const contactEmail = document.getElementsByName('contactEmail');
let contactIDArray = new Array();
for (let i = 0; i < contacts.length; i++) {
  const name = contactName[i].value;
  const title = contactTitle[i].value;
  const phone = contactPhone[i].value;
  const email = contactEmail[i].value;
  var id;
  createContact(name, title, phone, email).then(function (res) {
    id = res.data.id;
    alert(res.data.id);
    return id;
  });
  alert(id);

联系.js

import axios from 'axios';

export const createContact = async (contactName, contactTitle, contactPhone, contactEmail) => {
  try {
    const res = await axios({
      method: 'POST',
      url: '/api/v1/contacts',
      data: {
        contactName,
        contactTitle,
        contactPhone,
        contactEmail,
      },
    });
    return res.data.id;
  } catch (err) {
    console.log(err);
  }
};

标签: javascriptasync-awaitaxios

解决方案


我可以看到多个问题:

  1. 正如 VLAZ 在评论中所说,您正在尝试获取.data.id一个已经是 id 的值
  2. Promise应该使用util提供的工具来创建一系列承诺( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all可能是您正在寻找的)。

例如,我会按照这些思路去做(未经测试):

const contacts = document.getElementsByName('newContact');
const contactName = document.getElementsByName('contactName');
const contactTitle = document.getElementsByName('contactTitle');
const contactPhone = document.getElementsByName('contactPhone');
const contactEmail = document.getElementsByName('contactEmail');
let contactIDArray = new Array();

const requests = []

for (let i = 0; i < contacts.length; i++) {
  const name = contactName[i].value;
  const title = contactTitle[i].value;
  const phone = contactPhone[i].value;
  const email = contactEmail[i].value;
  var id;
  promise = createContact(name, title, phone, email).then(function (res) {
    const id = res.data.id;
    alert(res.data.id);
    return id;
  });
  requests.push(promise)
} 

Promise.all(requests).then(ids => {
    // This should contain the array of ids
    alert(ids)
})

编辑:另外,在同步和异步调用之间共享结果时要小心,通常一旦你开始你的异步任务,你就会留在异步世界中,如此处所述:How to return data from promise


推荐阅读