Фронтенд — это быстрорастущая область, и фронтенд-запросы, естественно, быстро развиваются, от нативного XHR до jquery ajax, а теперь и axios и fetch.
jquery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function() {},
error: function() {}
})
Это инкапсуляция нативного XHR, а также поддержка JSONP, что очень удобно, им действительно удобно пользоваться. Однако с появлением интерфейсных фреймворков, таких как react и vue, jquery уже не так смел, как раньше. Во многих случаях нам нужно использовать только ajax, но нам нужно ввести весь jquery, что очень неразумно, поэтому есть решение для выборки.
fetch
Fetch утверждает, что является альтернативой ajax. Его API разработан на основе Promise. Старые браузеры не поддерживают Promise и должны использовать polyfill es6-promise.
Например:
// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText) // 从服务器获取数据
}
}
xhr.send()
// fetch
fetch(url)
.then(response => {
if (response.ok) {
return response.json();
}
})
.then(data => console.log(data))
.catch(err => console.log(err))
Похоже на удобство, цепочка then похожа на знакомый обратный вызов.
В MDN, когда дело доходит до разницы между ним и jquery ajax, выборка очень странная:
Когда получен код состояния HTTP, представляющий ошибку, обещание, возвращенное из fetch(), не будет помечено как отклоненное, даже если код состояния ответа HTTP равен 404 или 500. Вместо этого он пометит статус обещания как разрешение (но установит для свойства ok возвращаемого значения разрешения значение false ) и пометит его как отклонение только в случае сбоя сети или блокировки запроса. По умолчанию fetch не отправляет и не получает файлы cookie с сервера, что может привести к запросам без проверки подлинности, если сайт использует сеансы пользователей (для отправки файлов cookie необходимо установить параметр учетных данных).
Вдруг почувствуете, что это не так просто в использовании, как jquery ajax? Не волнуйтесь, сочетание с async/await сделает наш асинхронный код более элегантным:
async function test() {
let response = await fetch(url);
let data = await response.json();
console.log(data)
}
Это похоже на синхронный код? Просто идеально! Ну, это не идеально, async/await — это API ES7, он все еще находится в экспериментальной стадии, и нам нужно использовать babel, чтобы перевести его в код ES5.
Следует также отметить, что fetch — это относительно низкоуровневый API, и во многих случаях нам нужно снова его инкапсулировать. Например:
// jquery ajax
$.post(url, {name: 'test'})
// fetch
fetch(url, {
method: 'POST',
body: Object.keys({name: 'test'}).map((key) => {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&')
})
Поскольку fetch — это относительно низкоуровневый API, нам нужно вручную соединить параметры в формате «имя = тест», а jquery ajax был инкапсулирован. Так что выборка не работает из коробки.
Кроме того, выборка не поддерживает контроль времени ожидания.
Упс, я чувствую, что выборка — это мусор, мне нужно продолжать расти. .
axios
You Yuxi рекомендует Axios, и это также пакет родного XHR. Он имеет следующие основные особенности:
- Может использоваться в node.js
- Предоставляет интерфейс для параллельных запросов
- Обещанная поддержка API
Простой в использовании
axios({
method: 'GET',
url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})
Есть много способов написать, проверьте документацию самостоятельно
одновременные запросы
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
Это официальный параллельный кейс, который кажется довольно мощным. Но кажется, что его метод all должен быть основан на Promise.all()
Axios относительно небольшой по размеру и не имеет различных проблем с выборкой, описанных выше.Я думаю, что это лучший метод запроса в настоящее время.
В конце концов, это некоторые базовые способы использования, я еще не разобрался в них глубоко, мне все еще нужно наступить на ямы в реальном бою, чтобы использовать их более свободно.