1.jQuery ajax
Ajax tradisional mengacu pada XMLHttpRequest(XHR), teknologi permintaan back-end paling awal yang muncul di js asli, dan inti menggunakan objek XMLHttpRequest.
JQuery ajax adalah enkapsulasi XHR asli dan menambahkan dukungan untuk JSONP. Setelah bertahun-tahun pembaruan dan pemeliharaan, ini benar-benar sangat nyaman, dan keuntungannya tidak perlu dikatakan; Jika Anda bersikeras untuk mencantumkan beberapa kekurangan, itu mungkin hanya berupa:
1. Ini adalah pemrograman untuk MVC, yang tidak sesuai dengan gelombang MVVM front-end saat ini
2. Berdasarkan pengembangan XHR asli, arsitektur XHR itu sendiri tidak jelas.
3. Seluruh proyek JQuery terlalu besar, dan sangat tidak masuk akal untuk memperkenalkan seluruh JQuery menggunakan ajax saja (mengadopsi solusi pengemasan yang dipersonalisasi dan tidak menikmati layanan CDN)
4. Tidak sesuai dengan prinsip pemisahan masalah
5. Konfigurasi dan pemanggilan sangat membingungkan, dan model asinkron berbasis peristiwa tidak ramah.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Seperti yang ditunjukkan pada gambar berikut:
2. Aksi
Setelah Vue2.0, You Yuxi merekomendasikan agar Anda mengganti JQuery ajax dengan axios, yang pasti membuat axios masuk ke mata banyak orang.
axios adalah klien HTTP berdasarkan janji untuk browser dan nodej, yang pada dasarnya merupakan enkapsulasi XHR asli, kecuali bahwa ini adalah implementasi janji yang sesuai dengan spesifikasi ES terbaru, dan itu sendiri memiliki karakteristik sebagai berikut:
1. Buat XMLHttpRequest dari browser Anda
2. Mendukung API Janji
3. Dukungan klien mencegah CSRF
4. Menyediakan beberapa antarmuka untuk permintaan bersamaan (penting, operasi yang jauh lebih nyaman)
5. Buat permintaan HTTP dari node.js
6. Mencegat permintaan dan tanggapan
7. Mengubah data permintaan dan respons
8. Pembatalan permintaan
9. Konversi data JSON secara otomatis
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. Ambil
Fetch ditagih sebagai alternatif untuk AJAX, yang muncul di ES6 dan menggunakan objek promise di ES6. Fetch dirancang berdasarkan janji. Struktur kode Fetch jauh lebih sederhana daripada ajax, dan parameternya sedikit seperti jQuery ajax. Namun, pastikan untuk mengingatfetch bukanlah enkapsulasi lebih lanjut dari ajax, tetapi js asli dan tidak menggunakan objek XMLHttpRequest。
Keuntungan dari mengambil:
1. Patuhi pemisahan fokus, dan jangan mencampur input, output, dan status yang dilacak oleh peristiwa dalam satu objek
2. Cara menulis yang lebih baik dan lebih nyaman
Terus terang, alasan di atas sama sekali tidak meyakinkan saya, karena Jquery dan Axios telah membantu kami merangkum xhr dengan cukup baik dan cukup mudah digunakan, mengapa kami masih harus menghabiskan banyak usaha untuk belajar mengambil?
Saya pikir keuntungan utama dari fetch adalah:
1. Sintaksnya ringkas dan lebih semantik
2. Berdasarkan implementasi janji standar, mendukung async/await
3. Kenyamanan isomorfik, menggunakan [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Lebih tingkat bawah, menyediakan API yang kaya (permintaan, respons)
5. Memisahkan diri dari XHR adalah implementasi baru dalam spesifikasi ES
fetch adalah API tingkat rendah yang dapat Anda anggap sebagai XHR asli, jadi tidak nyaman digunakan dan perlu dienkapsulasi.
Misalnya:
1) Ambil hanya melaporkan kesalahan untuk permintaan jaringan, dan memperlakukan 400 dan 500 sebagai permintaan yang berhasil, dan server tidak akan menolak saat mengembalikan 400 atau 500 kode kesalahan.
2) Fetch tidak membawa cookie secara default, Anda perlu menambahkan item konfigurasi: fetch(url, {credentials: 'include'})
3) fetch tidak mendukung pembatalan, tidak mendukung kontrol batas waktu, dan kontrol batas waktu yang diterapkan oleh setTimeout dan Promise.reject tidak dapat mencegah proses permintaan terus berjalan di latar belakang, mengakibatkan lalu lintas yang terbuang
4) fetch tidak memiliki cara untuk memantau kemajuan permintaan secara asli, sedangkan XHR dapat
|
Diposting pada 16/05/2019 13.28.28
|
|
|
|
Diposting pada 17/05/2019 18.16.39
|
Tuan tanah