正确使用Promises,Fetch,成功/失败处理程序

时间:2017-11-30 21:54:59

标签: javascript promise fetch

我想确定我正确使用Promises。我们有以下方法来简化API请求。我删除了不必要的东西,比如标题。

这里的意图是向makeApiRequest的调用者返回一个promise。这是在thunk(特别是redux-thunk)的上下文中使用,我们希望能够链接更多.then()语句。

const makeApiRequest = (request, onSuccess = defaultOnSuccess, onFailed = defaultOnFailed) => {
    const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content')
    const headers = { ... }

    return fetch(request.url, {...}).then(response => {
        if (response.ok) {
            return response.json()
                .then((json) => Promise.resolve(onSuccess(response.status, json)))
                .catch((error) => Promise.reject({message: error, status: response.status}))
        }

        const errorResponse = {
            status: response.status,
            message: response.error
        }

        if(response.status === 401) {
            errorResponse.message = 'Unauthorized'
        }
        return Promise.reject(errorResponse)
    }).catch((error) => {
        onFailed(error.status, error.message)
        console.log(error)
    })
}

const defaultOnFailed = (status, error) => console.log([status, error])
const defaultOnSuccess = (status, data) => console.log([status, data])

export default makeApiRequest

问题

1)我是否以最佳方式实施成功/失败处理程序?

2)我觉得嵌套的catch语句是错误的,但我需要能够处理上下文中的错误。

0 个答案:

没有答案