Axios 函数调用不会返回数据

Question

我确信这是我的理解/实现的问题。问题是，我试图将创建的对象的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);

contact.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);
}
};

Answer 1

I'm trying to return the ID of the created object into an array so that array can later be inserted into another object

根据你的要求，我有一些东西要给你:

1. 就像jkoestinger的回答一样，除非你真的需要，否则不要在循环中使用async/await或异步函数(.then())。
不要直接从异步调用返回属性，你应该返回整个对象并获得ID。这是很好的做法。

请看修改后的代码:

index.js

let contactPromises = [];
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;

contactPromises.push(createContact(name, title, phone, email));
}
let contacts = (contactPromises.length > 0) ? await Promise.all(contactPromises) : [];
let contactIds = contacts.map(contact => contact.id);
// use your contactIds here

axios

let res = await axios({
method: 'POST',
url: '/api/v1/contacts',
data: {
contactName,
contactTitle,
contactPhone,
contactEmail,
},
});
return res.data;   // <--- return res.data only, not the res.data.id

Answer 2

我可以看到有多个问题:

1. 正如VLAZ在评论中所说的，你试图在一个已经是id的值上获得.data.id
2. 应该使用Promiseutil提供的工具创建一系列承诺(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)
})

编辑:此外，要小心在同步和异步调用之间共享结果，通常在启动异步任务后，您将停留在异步世界中，如下所述: