1、发送 GET 请求 使用 Fetch API 发送 GET 请求非常简单,只需要调用 fetch() 方法,并传入请求 URL 即可。例如:
fetch('https://api.github.com/users') .then(response => response.json()) .then(data => console.log(data));
这段代码会向 GitHub 的用户列表 API 发送一个 GET 请求,并将响应数据解析为 JSON 格式后输出到控制台上。
2、发送 POST 请求 发送 POST 请求时,需要添加一些额外的参数,比如请求头和请求体。可以通过配置 options 对象来设置这些参数,然后在 fetch() 方法中传入该对象。例如:
const options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'john', password: 'secret' }) };
fetch('https://api.example.com/login', options) .then(response => response.json()) .then(data => console.log(data));
这段代码会向一个登录接口发送一个包含用户名和密码的 JSON 数据。
3、处理响应结果 当 Fetch API 发送完请求后,会返回一个 Promise 对象,通过该对象的 then() 方法可以获取到 HTTP 响应信息。可以调用 response.json()、response.text() 等方法来处理响应结果。例如:
fetch('https://api.github.com/users') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
这段代码通过 then() 方法获取到了响应数据,并在控制台上输出。同时,还可以使用 catch() 方法来处理错误情况。
总之,Fetch API 是 JavaScript 中非常强大的网络请求 API,它提供了很多便利的方法来发送 HTTP 请求并处理响应结果。使用 Fetch API 可以轻松地实现与服务器的交互,为 Web 开发带来更多可能性。