在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。
在 AJAX 时代，进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。
现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的Ionic 和React Native，都可以使用 fetch 进行完美的网络请求。
fetch 初体验
在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Co
`fetch` 是现代Web开发中用于进行网络请求的API，它提供了一种更加简洁和Promise-based的方式来处理HTTP请求。在React Native中，`fetch` API是内置的，使得开发者能够轻松地与服务器进行数据交互，尤其适合混合应用开发，如Ionic和React Native。
**基本使用方法：**
`fetch`函数接受两个参数：请求的URL和一个可选的配置对象。以下是一个基本的`fetch`使用示例：
```javascript
fetch('http://example.com/myservice')
.then((response) => {
// 处理响应
console.log(response);
})
.catch((error) => {
// 处理错误
console.error(error);
});
```
在上面的代码中，`fetch`发起一个GET请求到指定URL。`.then`方法处理成功响应，`.catch`处理可能出现的错误。
**返回的数据：**
`fetch`返回一个Promise，当请求完成时，Promise解析为一个`Response`对象。这个对象包含了HTTP状态码、响应头和响应体等信息。可以通过`response.text()`、`response.json()`或`response.blob()`等方法获取不同格式的响应数据。
**fetch 标准概览：**
虽然`fetch`尚未成为完全稳定的标准，但它在不断更新的规范中提供了很多功能，如支持多种HTTP方法（GET、POST、PUT等）、HTTP头部、Request和Response对象。这些使得`fetch`能更好地适应现代Web的需求。
**使用注意点：**
1. **超时问题**：`fetch` API本身不直接支持设置超时。如果需要设置超时，可以使用Promise.race结合setTimeout来实现：
```javascript
const timeout = new Promise((_, reject) => setTimeout(reject, 5000, 'Timeout'));
Promise.race([fetch(url), timeout])
.then(response => /* handle response */)
.catch(error => /* handle error */);
```
2. **跨域请求**：默认情况下，`fetch`遵循同源策略，但可以通过配置`init`对象中的`mode`字段，如`'cors'`（允许跨域）或`'no-cors'`（只读跨域）来处理跨域请求。
3. **错误处理**：`fetch`的错误处理通常通过`.catch`来捕获，但需要注意的是，非200状态码的响应不会触发错误，需要在`.then`中检查`response.ok`或`response.status`。
4. **请求体（Body）**：如果需要发送POST、PUT等有请求体的请求，可以在`init`对象中设置`body`字段，并确保设置正确的`Content-Type`头部。
5. **认证信息**：如果需要包含认证信息，可以设置`init`对象中的`credentials`字段，如`'include'`将包括当前浏览器的cookie信息。
6. **自定义请求头**：同样在`init`对象中，可以使用`headers`字段添加或修改请求头。
在React Native中，`fetch`底层是通过JavaScript桥接原生的网络模块，如iOS的RCTNetworking来实现的，这允许它在移动应用环境中工作，提供与Web类似的功能。
`fetch`是现代网络请求的一个强大工具，它简化了API调用的过程，并提供了更优雅的错误处理和响应处理方式。在React Native项目中，`fetch`是一个常用且高效的选择，尤其是在处理异步数据流和构建实时应用时。不过，由于浏览器兼容性问题，可能需要配合polyfills或使用其他库（如axios）来确保在所有目标平台上都能正常工作。
