1.jQuery ajax
Традиційний Ajax означає XMLHttpRequest(XHR), найдавнішу технологію бекенд-запитів, що з'явилася в оригінальному js, а ядро використовує об'єкт XMLHttpRequest.
JQuery Ajax — це інкапсуляція рідного XHR і додає підтримку JSONP. Після років оновлень і обслуговування це справді дуже зручно, і переваги не варто згадувати; Якщо ви наполягаєте на переліку кількох недоліків, це може бути лише:
1. Це програмування для MVC, яке не відповідає поточній хвилі фронтенд-MVVM
2. На основі нативної розробки XHR архітектура XHR не є зрозумілою.
3. Весь проєкт JQuery надто великий, і дуже нерозумно впроваджувати весь JQuery лише через ajax (впроваджуючи персоналізоване пакування і не користуючись CDN-сервісами)
4. Вона не відповідає принципу розділення інтересів
5. Конфігурація та виклик дуже заплутані, а асинхронна модель на основі подій не є дружньою.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Як показано на наступному рисунку:
2.axios
Після Vue2.0 Ю Юсі порадила замінити JQuery Ajax на axios, що, мабуть, зробило axios потраплянням у очі багатьох.
axios — це HTTP-клієнт, заснований на обіцянках для браузерів і nodejs, який по суті є інкапсуляцією рідного XHR, за винятком того, що це реалізація обіцянок, що відповідає останнім специфікаціям ES, і сам він має такі характеристики:
1. Створіть XMLHttpRequest зі свого браузера
2. Підтримка Promise API
3. Підтримка клієнтів запобігає CSRF
4. Надати деякі інтерфейси для одночасних запитів (важливо, набагато зручніше працювати)
5. Створіть HTTP-запит із node.js
6. Запити на перехоплення та відповіді
7. Трансформація даних запитів і відповідей
8. Скасування запиту
9. Автоматичне перетворення даних JSON
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. Знайти
Fetch позиціонується як альтернатива AJAX, який з'явився в ES6 і використовує об'єкт promise у ES6. Fetch створений на основі обіцянок. Структура коду Fetch набагато простіша, ніж у ajax, а параметри трохи схожі на jQuery ajax. Однак не забудьте про цеfetch не є додатковою інкапсуляцією ajax, а є нативним js і не використовує об'єкт XMLHttpRequest。
Переваги апорту:
1. Дотримуйтесь розділення фокусів і не змішуйте входи, виходи та стани, які відстежуються подіями в одному об'єкті.
2. Кращий і зручніший спосіб написання
Чесно кажучи, наведені вище причини мене зовсім не переконливі, адже і Jquery, і Axios допомогли нам добре інкапсулювати xhr і досить прості у використанні, чому нам все одно доводиться витрачати багато зусиль, щоб навчитися апортувати?
Я вважаю, що основні переваги fetch такі:
1. Синтаксис є лаконічним і більш семантичним
2. На основі стандартної реалізації обіцянки, підтримка async/await
3. Ізоморфна зручність, з використанням [ізоморфного fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Більш нижній рівень, що надає багаті API (запит, відповідь)
5. Відхід від XHR — це нова реалізація специфікації ES
fetch — це низькорівневий API, який можна уявити як нативний XHR, тому ним незручно користуватися і потрібно інкапсулювати.
Наприклад:
1) Fetch повідомляє про помилки лише для мережевих запитів і розглядає 400 та 500 як успішні запити, а сервер не відхиляє при поверненні кодів помилок 400 або 500.
2) Fetch за замовчуванням не містить файлів cookie, потрібно додати елемент конфігурації: fetch(url, {облікові дані: 'include'})
3) Fetch не підтримує скасування, не підтримує контроль тайм-ауту, а контроль тайм-ауту, реалізований setTimeout і Promise.rejection, не може запобігти продовженню роботи процесу запиту у фоновому режимі, що призводить до марної трафіку
4) fetch не має можливості нативно відстежувати хід запитів, тоді як XHR може
|
Опубліковано 16.05.2019 13:28:28
|
|
|
|
Опубліковано 17.05.2019 18:16:39
|
Орендодавець