Интерпретация метода выборки в h5 (резюме)

Fetch — новый объект в H5, призванный заменить ajax. Его основная цель — просто объединить его с ServiceWorker для достижения следующих оптимизаций:

1. Оптимизируйте работу в автономном режиме
2. Оставайтесь масштабируемыми

Конечно, если ServiceWorkers сотрудничает с браузерной базой данных IndexedDB, то поздравляю: каждый браузер может стать прокси-сервером. (Однако я не думаю, что это хорошо. Это будет делать интерфейсную часть все тяжелее и тяжелее, идя по старому пути предыдущей архитектуры c/s)

Поскольку это новый метод h5, должны быть старые браузеры, которые его не поддерживают. Для тех, кто не поддерживает этот метод.

Браузеру необходимо добавить дополнительный полифил:

[Ссылка]: https://github.com/fis-comComponents/whatwg-fetch

Ферч (принести):

HTML:

 fetch('/users.html') //Здесь возвращается объект Promise. Браузеры, которые его не поддерживают, должны использовать соответствующий ployfill или перекодировать через Babel и другие транскодеры перед выполнением then(function(response) { return. ответ .text()}) .then(function(body) { document.body.innerHTML = body})

JSON:

 fetch('/users.json') .then(function(response) { return response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (ex) { console.log('ошибка синтаксического анализа', ex)})

Метаданные ответа:

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) console .log(response.status) console.log(response.statusText)})

Форма сообщения:

 var form = document.querySelector('form')fetch('/users', { метод: 'POST', тело: new FormData(form)})

Опубликовать JSON:

 fetch('/users', { метод: 'POST', заголовки: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //здесь Имя тела запроса на публикацию: «Hubot», логин: «hubot», })})

Загрузка файла:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //Получаем выбранное содержимое файла data.append( ' пользователь', 'hubot')fetch('/avatars', { метод: 'POST', тело: данные})

(1) Отличия от ajax:

1. Метод patch не выдает ошибку при получении данных, даже ошибку 404 или 500, если только это не сетевая ошибка или процесс запроса не прерван. Но, конечно, есть решение, вот демонстрация:

 function checkStatus(response) { if (response.status >= 200 && response.status < 300) { //Определяем, является ли код состояния ответа нормальным, return response //Обычно возвращаем исходный объект ответа} else { var error = new Error (response .statusText) //Если это ненормально, будет выдано сообщение об ошибке ответа error.response = ошибка выдачи ответа }}function parseJSON(response) { return response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('запрос выполнен успешно с ответом JSON', data) }).catch( функция (ошибка) { console.log («запрос не выполнен», ошибка) })

2. Очень критическая проблема заключается в том, что метод fetch не отправляет файлы cookie, что очень фатально, когда необходимо поддерживать постоянное соединение между клиентом и сервером, поскольку серверу необходимо идентифицировать сеанс через файлы cookie для поддержания сеанса. состояние. Если вы хотите, чтобы отправка файлов cookie требует изменения информации:

 fetch('/users', { Credentials: 'same-origin' //Отправляем файлы cookie в одном домене})fetch('https://segmentfault.com', { Credentials: 'include' //Отправляем файлы cookie между доменами} )

На рисунке ниже показан результат междоменного доступа к сегменту.

В противном случае запрошенный URL-адрес и URL-адрес ответа совпадают, но если выполняется такая операция, как перенаправление, файл response.url может отличаться. В XHR ответ.url после перенаправления может быть неточным, его необходимо установить. : response.headers['X-Request-URL'] = request.url подходит для (Firefox <32, Chrome <37, Safari или IE.)

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.