📅  最后修改于: 2023-12-03 15:23:51.131000             🧑  作者: Mango
在开发 Web 应用程序时,我们需要经常从服务器获取数据。在 JavaScript 中,我们可以使用 Fetch API 来完成这个任务。
Fetch API 是基于 Promise 设计的,它为我们提供了一个简洁的方式来发送 HTTP 请求并处理响应。在本文中,我们将介绍如何使用 Fetch API。
我们可以使用 fetch()
方法来发送一个 GET 请求。示例代码如下:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
在上面的示例中,我们向 https://api.example.com/data
发送了一个 GET 请求。然后使用 response.json()
方法解析响应数据,并在 Promise 完成后输出到控制台。如果发生错误,则在 catch 块中打印错误日志。
我们也可以发送一个带有数据体的 POST 请求。示例代码如下:
const data = {
username: 'john.doe',
password: 'secret'
};
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
};
fetch('https://api.example.com/login', options)
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
在上面的示例中,我们向 https://api.example.com/login
发送了一个 POST 请求,将数据体作为 JSON 字符串传递给服务器。在 Promise 完成后输出响应数据到控制台。
我们也可以使用 async/await 来发送 Fetch API 请求,让代码看起来更简洁。示例代码如下:
async function fetchData(url, options) {
try {
const response = await fetch(url, options);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
const data = {
username: 'john.doe',
password: 'secret'
};
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
};
fetchData('https://api.example.com/login', options);
在上面的示例中,我们使用 async/await 创建了一个 fetchData()
方法。我们向 https://api.example.com/login
发送了一个 POST 请求,并在 Promise 完成后输出响应数据到控制台。
在本文中,我们介绍了如何使用 Fetch API 发送 GET 和 POST 请求,以及使用 Promise 和 async/await 来处理响应。通过使用 Fetch API,我们可以更好地从服务器获取数据并提高开发效率。