关于前端:如何获取-fetch-返回数据

Fetch API 提供了一个 JavaScript 接口，用于拜访和操纵 HTTP 管道的一些具体局部，例如申请和响应。

它还提供了一个全局 fetch() 办法，该办法提供了一种简略，正当的形式来跨网络异步获取资源。

这种性能以前是应用 XMLHttpRequest 实现的。

因为以下起因，咱们在判断后端返回数据时候，如果 HTTP 状态码谬误，可能判断比拟麻烦。

当接管到一个代表谬误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即便响应的 HTTP 状态码是 404 或 500。

相同，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 – 299 的范畴内，则设置 resolve 返回值的 ok 属性为 false），仅当 网络故障时或申请被阻止时，才会标记为 reject。

那么 如何获取从 fetch() promise 返回的数据？

因为波及到异步问题（试图以同步形式获取此异步调用的后果），所以通过 .then 回调能够解决。

function checkUserHosting(hostEmail, callback) {fetch('http://localhost:3001/activities/')
    .then((response) => { 
        // 留神此处
        response.json().then((data) => {console.log(data);
            return data;
        }).catch((err) => {console.log(err);
        })
    });
}

或者

const checkUserHosting = async (hostEmail, callback) => {let hostEmailData  = await fetch(`http://localhost:3001/activities`)
    
    // 留神此处 //use string literals
    let hostEmailJson = await hostEmailData.json();
    return hostEmailJson;
}

示例

await fetch('http://localhost:3001/activities', {
    method: 'POST',
    headers: {
    'Accept': 'application/json, */*',
    'Content-Type': 'application/json;charset=UTF-8',
    'cache': 'default',
    },
    'credentials': 'include', // 示意申请是否携带 cookie
    body: JSON.stringify(data)
}).then((response) => {response.json().then((data) => {if (data.code === 500) errorMessage = data.msg
        return data;
    }).catch((err) => {console.log(err);
    })
}).then((data) => {console.log('data is', data)
})
.catch(e => {pcConsole.log('get postcat client download link error');
});

获取 fetch 返回数据