Axios函数调用无法返回数据，创建对象ID存入数组失败求助

根本原因 #

1. 异步执行顺序错误：createContact 是基于Promise的异步函数，调用后不会阻塞同步代码执行。.then() 内的回调需要等接口请求完成后才会执行，而你在循环中写的同步赋值、读取id的代码会先运行，此时id还未被赋值，自然无法正常存入数组。
2. 返回值读取错误：createContact 内部已经直接返回接口返回的res.data.id，你在调用时的.then()回调中读取res.data.id属于二次取值，拿到的只会是undefined。

解决方法 #

推荐使用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');

// 收集所有创建联系人的请求Promise
const contactPromiseList = [];
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;
  contactPromiseList.push(createContact(name, title, phone, email));
}

// 等待所有请求完成，直接获取完整的ID数组
Promise.all(contactPromiseList).then(contactIDArray => {
  // 此处拿到的contactIDArray就是所有创建成功的联系人ID数组
  // 后续需要用到这些ID的逻辑都写在这里即可
  console.log(contactIDArray);
}).catch(err => {
  console.log('批量创建联系人失败：', err);
});

如果需要按顺序逐个创建联系人，可以用async/await串行处理：

async function batchCreateContacts() {
  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');
  const contactIDArray = [];

  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;
    // 等待当前请求完成再执行下一轮
    const id = await createContact(name, title, phone, email);
    contactIDArray.push(id);
  }

  // 所有请求完成后即可使用ID数组
  console.log(contactIDArray);
}

batchCreateContacts().catch(err => console.log(err));

内容的提问来源于stack exchange，提问作者chrischelios_