Fetch API
Fetch API 是用于从服务器获取资源的 Web API。它提供了一种更高级别的接口,可以用来获取资源,而无需使用 XMLHttpRequest。
Fetch API 基于 Promises,这意味着它返回一个 Promise 对象,可以用于异步处理。
Fetch API 允许你指定请求的 HTTP 方法、URL、请求头、请求体等。
Fetch API 还提供了请求和响应的接口,允许你读取响应头、状态码、内容等。
Fetch API 还提供了超时设置、重试设置、缓存设置等功能。
基本用法
Fetch API 的基本用法如下:
fetch(url)
.then(response => {
// 处理响应
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// 使用数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('Fetch failed:', error);
});
- 调用
fetch()
方法,传入请求 URL。 fetch()
方法返回一个 Promise 对象,该对象会在响应到达时被 resolve。- 在
then()
方法中,我们可以处理响应。如果响应状态码不是 2xx,我们可以抛出一个错误。 - 如果响应状态码是 2xx,我们可以调用
json()
方法,解析响应内容并返回一个 Promise 对象。 - 在
then()
方法中,我们可以处理解析后的响应数据。 - 如果
fetch()
方法抛出错误,我们可以在catch()
方法中处理。
进阶用法
Fetch API 还有一些高级用法,包括:
- 请求超时设置:
fetch(url, { timeout: 5000 })
,设置超时时间为 5 秒。 - 请求重试设置:
fetch(url, { retries: 3 })
,设置最大重试次数为 3 次。 - 请求缓存设置:
fetch(url, { cache: 'default' })
,使用默认缓存。 - 请求头设置:
fetch(url, { headers: { 'Content-Type': 'application/json' } })
,设置请求头。 - 请求体设置:
fetch(url, { method: 'POST', body: JSON.stringify(data) })
,设置请求体。 - 响应状态码检查:
response.ok
,检查响应状态码是否为 2xx。 - 响应头读取:
response.headers.get('Content-Type')
,读取响应头。 - 响应内容读取:
response.text()
、response.json()
、response.blob()
、response.formData()
,读取响应内容。 - 请求取消:
const controller = new AbortController(); fetch(url, { signal: controller.signal })
,取消请求。
封装 fetch
为了方便使用,我们可以封装 fetch,使其更加易用。
function fetchData(url, options = {}) {
const { method = 'GET', headers = {}, body } = options;
return fetch(url, { method, headers, body })
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => {
console.error('Fetch failed:', error);
});
}
// 使用
fetchData('https://example.com/api/data')
.then(data => {
console.log(data);
});
封装后的 fetchData()
方法可以传入 URL 和选项对象,包括请求方法、请求头、请求体等。
fetch 在 Vue 中的封装与使用
在 Vue 中,我们可以使用插件来封装 fetch。
// 安装插件
import Vue from 'vue';
import VueFetch from 'vue-fetch';
Vue.use(VueFetch);
// 使用
this.$http.get('https://example.com/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Fetch failed:', error);
});
在 Vue 中,我们可以使用 this.$http
对象来调用 fetch。
this.$http
对象封装了 fetch,并提供了一些额外的功能,如:
- 响应状态码检查:
this.$http.get(url).then(response => {... }).catch(error => {... })
,检查响应状态码是否为 2xx。 - 请求超时设置:
this.$http.get(url, { timeout: 5000 }).then(response => {... }).catch(error => {... })
,设置超时时间为 5 秒。 - 请求重试设置:
this.$http.get(url, { retries: 3 }).then(response => {... }).catch(error => {... })
,设置最大重试次数为 3 次。 - 请求缓存设置:
this.$http.get(url, { cache: 'default' }).then(response => {... }).catch(error => {... })
,使用默认缓存。 - 请求头设置:
this.$http.get(url, { headers: { 'Content-Type': 'application/json' } }).then(response => {... }).catch(error => {... })
,设置请求头。 - 请求体设置:
this.$http.post(url, { data: { name: 'John' } }).then(response => {... }).catch(error => {... })
,设置请求体。 - 响应内容读取:
this.$http.get(url).then(response => { console.log(response.data) }).catch(error => {... })
,读取响应内容。