1. Что такое выборка?
Определение извлечения
Fetch — это, по сути, стандарт, определяющий поток запросов, ответов и привязок. Стандарт Fetch также определяет JavaScript API Fetch(), который предоставляет большую часть сетевых функций на довольно низком уровне абстракции, и сегодня мы говорим о Fetch API. Fetch API предоставляет интерфейс для получения ресурсов (включая междоменные). Он похож на XMLHttpRequest, но новый API предоставляет более мощный и гибкий набор функций.Суть Fetch заключается в абстракции интерфейса HTTP., включая запрос, ответ, заголовки, тело и глобальную выборку для инициализации асинхронных запросов.
2. Как использовать выборку
Использование метода fetch()
Fetch API предоставляет глобальный метод fetch(), который находится в миксине WorkerOrGlobalScope и используется для инициации запроса на получение ресурсов. Он возвращает обещание, которое разрешается при ответе на запрос, и возвращает объект Response.
fetch(input?: Request | string, init?: RequestInit): Promise<Response>
fetch(url, options).then(function(response) {
// 处理 HTTP 响应
}, function(error) {
// 处理网络错误
})
параметры выборки()
Метод выборки может принимать два входных параметра и опции.
-
Параметр Input может быть строкой, содержащей URL-адрес для получения ресурса. Это также может быть один Requestобъект.
-
options — необязательный параметр. Объект элемента конфигурации, включая все параметры запроса. Необязательные параметры:
метод: метод, используемый запросом, например GET, POST.
заголовки: информация заголовка запроса, включая объект Headers, связанный с запросом.
body: информация тела запроса. Обратите внимание, что запросы метода GET или HEAD не могут содержать информацию о теле.
режим: запрошенный режим, такой как cors, no-cors или тот же источник.
учетные данные: запрошенные учетные данные, такие как пропуск, тот же источник или включение. Эта опция должна быть предоставлена для автоматической отправки файлов cookie в пределах текущего домена.
Общие запросы на получение
HTML
fetch('/index/fetchHtml')
.then((res) => {
return res.text()
}).then((result) => {
document.body.innerHTML += result
})
.catch((err) => {
})
JSON
fetch('/api/user/CaiCai')
.then((res) => {
return res.json()
})
.then((json) => {
console.log(json)
})
.catch((err => {
}))
POST Form
function postForm() {
const form = document.querySelector('form')
const name = encodeURI(document.getElementsByName('name')[0].value)
fetch(`/api/user/${name}`, {
method: 'POST',
body: new FormData(form)
})
}
POST JSON
fetch('/api/user/CaiCai', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'CaiCai',
age: '26',
})
})
получать заметки
1. Обработка ошибок
fetch только в случае сетевых ошибок, возвращенное обещание будет отклонено. Успешная проверка fetch() включает в себя не только разрешение промиса, но и истинность свойства Response.ok. Статус HTTP 404 не считается сетевой ошибкой, поэтому статус промиса — разрешение.
2. Настройки учетных данных
Fetch может контролировать, отправлять ли запрос с файлом cookie через учетные данные. учетные данные могут быть включены, того же происхождения, опущены. include, чтобы позволить браузеру отправлять запросы, включающие учетные данные (даже для источников из разных источников). Если вы хотите отправлять учетные данные только тогда, когда URL-адрес запроса находится в том же источнике, что и вызывающий скрипт, добавьте учетные данные: «тот же источник». Вместо этого, чтобы убедиться, что браузер не включает учетные данные в запрос, используйте учетные данные: «опустить».
учетные данные по умолчанию имеют значение «тот же источник», но следующие версии браузеров реализуют более старую версию спецификации выборки, где по умолчанию используется значение «игнорировать»: Фаерфокс 39-60 Хром 42-67 Сафари 10.1 11.1.2 Если вы ориентируетесь на эти браузеры, рекомендуется всегда явно указывать учетные данные: «тот же источник» для всех запросов на выборку вместо того, чтобы полагаться на значение по умолчанию.
3. Подвеска
fetch сам по себе не дает возможности прервать запрос. Однако в некоторых браузерах реализован AbortController, который может прервать запрос на выборку через AbortController.
const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 5000);
fetch('/api/user/CaiCai', {
signal, // 在option中加入signal
method: 'POST',
// credentials:'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'CaiCai',
age: '26',
})
}).then((res) => {
return res.json()
}).then((result) => {
console.log(result)
}).catch((err) => {
console.log(err)
})
4. Совместимость
В следующем разделе "Можно ли использовать" показана совместимость fetch. В настоящее время поддерживается большинство браузеров. Можно использовать неподдерживаемые браузеры.fetch polyfill
3. Зачем использовать Fetch вместо XHR
1. fetch возвращает объект обещания, который более лаконичен, чем реализация XMLHttpRequest, fetch более лаконичен в использовании, и фактический объем кода, необходимый для выполнения работы, также меньше
2. fetch может настроить, будут ли файлы cookie
3. Fetch используется в ServiceWorker.Что касается преимуществ, которые может иметь ServiceWorker, то это будет записано обратно, когда ServiceWorker будет написан в будущем.
4. Зачем отказываться от апорта
Прежде всего, спасибо вам, студенты, за указание на проблемы в статье, заголовок действительно неуместен, а текст неверен. Вот несколько дополнительных вопросов о выборке:
1. Fetch не поддерживает jsonp, если в проекте используется JSONP, необходимо реализовать отдельный JSONP.
2. Fetch сама по себе не предоставляет метод прерывания и требует, чтобы AbortController обрабатывал прерывание, что будет громоздко реализовать. И совместимость с AbortController не очень, но @Чжоу ГонлайОдноклассник указал, что мы можем использовать «abortcontroller-polyfill».
3. В нашем обычном использовании fetch мало чем отличается от XHR и похож на @jokerapiОднокурсник сказал: «В реальном бизнесе запросы API обрабатываются с помощью переупакованных функций. Независимо от того, является ли базовый уровень Fetch или XHR, это мало что меняет». Так что если особых нужд нет, переходить с XHR на fetch не имеет смысла. Но в ServiceWorker выборка будет сиять. В настоящее время домашняя страница Taobao использует fetch+ServiceWorker для реализации автономного кэширования.
Ссылка на ссылку: