fetch
是浏览器自带的函数,用于发送网络请求。fetch
方法返回一个 Promise 对象,可以通过链式调用 then
方法处理响应数据,或者通过 catch
方法捕获错误信息。它支持 Promise 和异步/await 两种调用方式。‘
以下是一个示例代码,展示如何使用 fetch
进行 GET 请求:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
上面的代码中,首先使用 fetch
方法发送了一个 GET 请求,并指定了请求的 URL。然后,通过 then
方法对请求返回的 Response
对象进行处理,使用 json()
方法将响应体转换为 JSON 格式的数据,最后将数据打印到控制台中。如果请求出错,则使用 catch
方法捕获错误并打印到控制台中。
除了 GET 请求,还可以通过 fetch
发送 POST 请求,示例代码如下:
const requestBody = {
title: 'foo',
body: 'bar',
userId: 1
};
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify(requestBody),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
上面的代码中,通过指定 method
参数为 'POST'
,并在请求的 body
参数中设置请求体内容,使用 JSON.stringify()
方法将请求体转换为 JSON 格式的字符串。另外,还可以通过 headers
参数设置请求头,将请求体的类型指定为 'application/json'
。最后,通过 then
方法对请求返回的数据进行处理,将响应体转换为 JSON 格式的数据并打印到控制台中。如果请求出错,则使用 catch
方法捕获错误并打印到控制台中。
需要注意的是,fetch
方法返回一个 Promise 对象,因此需要使用 then
和 catch
方法进行异步处理。此外,在发送 POST 请求时,需要设置请求头的 'Content-Type'
参数为 'application/json'
,并将请求体使用 JSON.stringify()
方法进行序列化。
POST发送form数据
const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('password', '123456');
fetch('https://example.com/login', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))