我有一个请求:
/*
|--------------------------------------------------------------------------
| 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
,请避免使用async
await
,反之亦然。c7rzv4ha2#
请尝试如下调整代码
1.在异步函数getUserCurrentAvatar内部-〉返回等待axios.post( AJAX _url),并且不要在那里添加处理程序。
1.在UseEffect内部调用异步函数并添加处理程序。