Question

我有一个在其功能之一中执行fetch method='POST'的组件：

handleSubmit(context) {
    let json = {
        username: this.state.username,
        password: this.state.password,
    }
    json = JSON.stringify(json)
    fetch(`/api/auth/token/`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: json,
    })
    .then(response => response.json())
    .then(response => this.loginSuccess(context, response))
}

这是loginSuccess函数：

loginSuccess(context, response) {
    console.log('Login Success!')
    context.toggleLoginModal()
    context.toggleLoggedIn()
    context.setUsername(response.profile_username)
    context.setUserId(response.profile_id)
}

此代码的问题是，如果响应不位于200和300之间，例如 Bad Request （错误请求），则loginSuccess中的所有代码仍将执行，不应执行不会发生。

所以，我改变了

.then(response => response.json())
.then(response => this.loginSuccess(context, response))

收件人：

.then(response => {
    response.status >= 200 && response.status < 300 ?
            this.loginSuccess(context, response.json())
            :
            console.log(response)
})

现在，在loginSuccess方法中，参数response为Promise {<pending>}，而response.profile_username为undefined。

该如何解决？

Answer 1

尚未兑现承诺。尝试类似的东西：

.then(response => {
    response.ok ?
            response.json().then(json => { this.loginSuccess(context, json) })
            :
            console.log(response)
})

提取方法POST-响应数据尚未处理

1 个答案: