javascript - 我如何异步拦截点击

Question

我有一个带有按钮的组件可以处理一些事情，我想将拦截器传递给该组件，这样我就可以在拦截器内调用 API 并请求许可，如果许可被授予组件按钮的 onClick 中的代码被执行，如果没有，那么它不是
所以现在我不知道该怎么做，这是一个显示我想做什么的 sudo 代码:

//Inside componentA which is using componentB
onClickInterceptor = () => {
    axios.post(//something)
        .then(response => {
            // do a few thing and finally you know if you should return true or not
        })
        .catch(error => {
            //you know you don't have permission
        })


    return //This is my problem, i don't know what to return, i don't want to return the axios post, i want something like a new promise ?        
}

//Inside componentB
onButtonClick = (event) => {
    if (this.props.onClickInterceptor) {
        this.setState({ disableButton: true })

        this.props.onClickInterceptor()
            .then(permissionState) => {
            if (permissionState) {
                this.runTheMainCode()
            }
            else {
                //dont do anything
            }

            this.setState({ disableButton: false })
        }
    }
    else    
        this.runTheMainCode()
}

this.runTheMainCode() {
    //...
}  

现在我不知道在 onClickInterceptor 中返回什么，我知道我不想返回 axios，但是我如何返回一个只返回 true 或 false 的 promise？
顺便说一句，我希望在拦截器完成之前禁用按钮

Answer 1

你需要返回axios promise并在componentB处理它

//Inside componentA which is using componentB
onClickInterceptor = () => {
    return axios.post(//something)
        .then(response => {
            // you can return false or true here
            return true 
        })
        .catch(error => {
            throw error
        })      
}

//Inside componentB
onButtonClick = (event) => {
   this.props.onClickInterceptor.then(returnedBoolean=>{
   // here will come what you returned
      this.setState({ disableButton: returnedBoolean })
   }).catch(err=>{
   // the error hadnling ....
   this.setState({ error: true })
   })
}