引言
JavaScript提供了一个现代化的API，即fetch方法。fetch方法提供了一种更简单和灵活的方式来进行HTTP请求，并返回一个Promise对象，以便处理响应数据。
基本语法
fetch(url[, options])
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
url：表示要请求的URL地址。 options（可选）：一个配置对象，用于设置请求的选项，例如请求的方法、请求头、请求体等。 fetch函数会返回一个Promise对象，可以使用.then()方法来处理成功的响应，使用.catch()方法来处理错误。在成功的回调函数中，可以对响应进行处理、解析数据等操作。在错误的回调函数中，可以进行错误处理或者进行错误提示。
使用案例
- Get请求
fetch('https://api.example.com/data')
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => {
// 处理获取到的数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('Error:', error);
});
在上述代码中，我们使用fetch函数发送一个GET请求到指定的URL地址。在第一个.then()回调函数中，我们检查response对象的ok属性来判断请求是否成功。如果成功，我们使用.json()方法将响应体解析为JSON格式，并返回一个新的Promise对象。在第二个.then()回调函数中，我们可以处理获取到的数据。在.catch()回调函数中，我们处理任何发生的错误。
- POST请求 除了发送GET请求，fetch函数还可以发送其他HTTP请求，例如POST、PUT、DELETE等。可以通过options参数来指定请求的方法、请求头、请求体等信息。以下是一个发送POST请求的示例
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 30 })
};
fetch('https://api.example.com/users', requestOptions)
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => {
// 处理获取到的数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('Error:', error);
});
处理响应
在成功的回调函数中，可以对响应进行处理和解析数据。fetch方法返回的响应对象包含了各种方法和属性，例如json()、text()、blob()等，用于获取不同类型的响应数据。
json()方法：将响应体解析为JSON格式，并返回一个Promise对象，可以使用.then()方法获取解析后的数据。 text()方法：将响应体解析为纯文本，并返回一个Promise对象。 blob()方法：将响应体解析为二进制数据，并返回一个Promise对象。 以下是一个示例，演示如何处理不同类型的响应数据
fetch('https://api.example.com/data')
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => {
// 处理获取到的JSON数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('Error:', error);
});
超时处理
const controller = new AbortController();
const timeout = setTimeout(() => {
controller.abort();
}, 5000); // 设置超时时间为5秒
fetch('https://api.example.com/data', { signal: controller.signal })
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => {
// 处理获取到的数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('Error:', error);
})
.finally(() => {
clearTimeout(timeout); // 清除超时计时器
});
