我有一个请求：
/*
|--------------------------------------------------------------------------
| Function : Get > User > Current Avatar
|--------------------------------------------------------------------------
*/
async function getUserCurrentAvatar() {
// Ajax URL
const ajax_url = process.env.NEXT_PUBLIC_FRONTEND_API_ROOT + 'user' + '/' + session.user.id + '/' + 'edit/avatar/getusercurrentavatar';
/*
|--------------------------------------------------------------------------
| AJAX > Request
|--------------------------------------------------------------------------
*/
await axios.post(ajax_url)
.then(response => {
setCurrentUserAvatarId(response.data.id);
setCurrentUserAvatarUrl(response.data.current_avatar);
}).catch((error) => {
// Error
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
// console.log(error.response.data);
// console.log(error.response.status);
// console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the
// browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
}我用useEffect()的形式来命名它：
/*
|--------------------------------------------------------------------------
| Use Effect 1
|--------------------------------------------------------------------------
*/
useEffect(() => {
// Session > Available
if(session) {
getUserCurrentAvatar();
}
}, [session]);但我收到警告Promise returned from getUserCurrentAvatar is ignored, Add '.then()'
我的问题是我可以在.then()里面做副作用吗？
在async function getUserCurrentAvatar() { ... }中，我将state设置为：
setCurrentUserAvatarId(response.data.id);
setCurrentUserAvatarUrl(response.data.current_avatar);我需要在设置currentUserAvatarUrl状态后执行sideEffect，我尝试在useEffect()中使用then()，但它不起作用：
/*
|--------------------------------------------------------------------------
| Use Effect 1
|--------------------------------------------------------------------------
*/
useEffect(() => {
// Session > Available
if(session) {
getUserCurrentAvatar().then(() => {
const fileName = 'myFile.jpg'
imageSrcToFile(currentUserAvatarUrl, fileName).then();
});
}
}, [session]);then()中的匿名函数从未被触发，其中的任何功能都不起作用
但如果我像往常一样在另一个useEffect()中执行此操作，它将正常工作：
/*
|--------------------------------------------------------------------------
| Use Effect 2
|--------------------------------------------------------------------------
*/
useEffect(() => {
const fileName = 'myFile.jpg'
imageSrcToFile(currentUserAvatarUrl, fileName).then();
}, [currentUserAvatarUrl]);那么then()有什么用呢？为什么IDE每次都警告我在async函数调用之后包含then()？
编辑：我尝试：
useEffect(() => {
// Session > Available
if(session) {
getUserCurrentAvatar().then((response) => {
alert(`Received response: ${JSON.stringify(response, null, 2)}`);
const fileName = 'myFile.jpg'
imageSrcToFile(currentUserAvatarUrl, fileName).then();
});
}
}, [session]);但我得到的是Received response: undefined
2条答案
按热度按时间kgsdhlau1#
Async函数不直接返回值，它返回promise，因此需要then，您可以使用async-await，反之亦然。代码的问题，因为
getUserCurrentAvatar()没有返回任何东西，所以得到响应undefined。我已经更新了代码，如下所示。现在，您将能够获得响应，然后将该响应数据用于您的后续请求，如下所示。此外，如果您使用
then，请避免使用asyncawait，反之亦然。c7rzv4ha2#
请尝试如下调整代码
1.在异步函数getUserCurrentAvatar内部-〉返回等待axios.post（ AJAX _url），并且不要在那里添加处理程序。
1.在UseEffect内部调用异步函数并添加处理程序。