Fetch API 无法识别 response.status答案

【问题标题】：Fetch API failed to recognize response.statusFetch API 无法识别 response.status
【发布时间】：2018-09-30 14:51:37
【问题描述】：

我只是想使用 Fetch API 来获取数据。这是我的代码

    function status(response) {  
    return response.json().then( data => {
        if(response === 200) {  
            return data
        }else if(response.status === 400){
            let message = data.error.error.error[0]
            return Promise.reject({status: response.status, message});
        }else if(response.status === 401){
            let message = data.message
            return Promise.reject({status: response.status, message});
        }else{  
            return Promise.reject({status: response.status, data});    
        }  
    })
    }

export function getAgenda(limit, offset, status){
    return (dispatch)=>{
        dispatch({
            type: 'FETCH_AGENDA_REQUEST'
        })

        const token = loadCred().token

        api.fetchAgenda(limit, offset, status, token)
            .then(status) 
            .then(function(data){
                console.log(data) // this is printed in console
                dispatch({
                  type: 'FETCH_AGENDA_SUCCESS',
                  payload: { 
                    ...data,
                    totalPages: Math.ceil(data.totalRows / limit) 
                    }
                })  
            }).catch(function(error) {
                console.log(error) // not this one
                dispatch({
                  type: 'FETCH_AGENDA_ERROR',
                  payload: {
                    error
                  }
                });
            })
    }
}

由于 Fetch API 将 400++ 视为已解决的 Promise，因此我尝试先使用 Status 函数对其进行过滤。但事实证明，错误 401 被认为是 Resolved 而不是 Rejected。我试图检查，但控制台中的错误没有被 catch 打印出来。

【问题讨论】：

如果服务器没有在响应中发回 Access-Control-Allowed-Origin 响应头，那么您的浏览器将阻止您的前端 JavaScript 代码读取响应的任何属性——包括.status 属性 — 即使您仍然可以使用 devtools 查看响应的属性。而且大多数服务器不会将 Access-Control-Allow-Origin 响应标头添加到 4xx（错误）响应中——相反，它们通常只会将它们添加到 2xx（成功）响应中。
那我应该怎么做才能正确处理呢？@sideshowbarker
我找到了这篇文章css-tricks.com/using-fetch，效果很好。看起来很相似，但不知何故我的代码不起作用。稍后我会尝试分析。谢谢@sideshowbarker

标签： redux promise fetch-api

【解决方案1】：

您的状态函数可能会返回已解决的承诺或被拒绝的承诺（抛出错误会使 catch 语句阻塞它）。

function main() {
    // call fetchAgenda api
    api.fetchAgenda(
    // what you are doing here
        // ...
    // return a response object
    ).then(
        response => status(response)
    // resolved promise returned by status call
    ).then(
        data => console.log(data);
    // rejected promise returned by status call
    ).catch(
        error => console.log(error);
    );
}

function status(response) {
    // if response is ok (200 - 299) or is less than 400
    if (response.ok || response.status < 400) {
        // it's good, convert it into json
        return response.json();
    }
    else {
        // response isn't fine, reject promise...
        return Promise.reject(response);
        // ... or throw an error
        // return throw Error(response);
    }
}

【讨论】：