一篇文章搞懂javascript的fetch

Fetch函数是JavaScript中新引入的一个API，它允许开发者以更加优雅的方式来获取网络资源。Fetch函数比XMLHttpRequest更加简单易用，并且使用Promise来处理异步操作，更加方便了开发者的工作。以下是Fetch函数的使用方法：

首先，Fetch函数接受一个参数，该参数是一个URL，用于指定将要获取的资源。

fetch(url)

然后，Fetch函数返回一个Promise对象，该对象会根据请求的结果进行resolve或者reject，如果请求成功，resolve的参数是一个Response对象，我们可以通过该对象获取返回的数据，如果请求失败，reject的参数是一个Error对象，我们可以根据这个对象来检查失败的原因。

fetch(url).then(response => {
    // 请求成功
    // 处理 response
}).catch(error => {
    // 请求失败
    // 检查 error
});

Fetch函数也可以接受一个配置对象，此时，Fetch函数会根据配置对象中的参数来发起请求，并返回Promise对象。

const request = {
    method: 'POST',
    body: JSON.stringify({
        name: 'John',
        age: 20
    })
};

fetch(url, request).then(response => {
    // 处理 response
}).catch(error => {
    // 检查 error
});

在使用Fetch函数时，容易犯的错误是没有检查返回的Response对象的status属性。Response对象的status属性中包含了请求的状态码，如果状态码不是200，说明请求失败了，我们应该检查error对象中的信息。

fetch(url).then(response => {
    if (response.status !== 200) {
        throw new Error('请求失败');
    } else {
        // 处理 response
    }
}).catch(error => {
    // 检查 error
});

总之，Fetch函数比 XMLHttpRequest 更加简单易用，它接受一个参数用于指定将要获取的资源，并且返回一个Promise对象，开发者可以根据Promise对象的resolve和reject来判断请求的结果，从而处理响应的数据或者错误信息。