JS 网络请求 Fetch API

标签

HTML

正则表达式

Json

包管理工具

vite

CSS

XPath

JavaScript

Jquery

less

ES6

Vue

React

Layui

editor.md

sea.js

Zepto.js

mysql.js

mssql.js

NodeJs

Express

前端template

YAML

杂项

外部链接

JS 网络请求 Fetch API

[TOC]

## 1. JS 网络请求 Fetch API

Fetch API 是现代浏览器提供的一种用于网络请求的 JavaScript API，基于 Promise 设计，用于替代传统的 XMLHttpRequest，提供更简洁、灵活的方式来发送 HTTP 请求和处理响应。

**示例：**

```javascript
fetch('https://api.example.com/data', {
  method: 'GET',
  // 添加请求头
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here',
    'Custom-Header': 'custom_value'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
### 1.1. 请求头设置

在 Fetch API 中设置请求头需要使用对象属性`headers`

## 2. Fetch API 与 Ajax 的区别

它与 AJAX 的主要区别如下：

**简单示例对比：**

+ AJAX 示例：
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('请求失败');
  }
};
xhr.send();
```

+ Fetch 示例：
```javascript
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

总的来说，Fetch API 是 AJAX 技术的现代替代方案，提供了更符合现代 JavaScript 语法的 API 设计，但在兼容性和某些细节处理上与传统 XMLHttpRequest 有所不同。