bulan sumber terbuka: Bagaimana saya mengekalkan alat permintaan Next-Gen

Dua tahun lalu, saya mereka bentuk dan membangunkan perpustakaan strategi permintaan JavaScript yang dipanggil alovajs. Sejak promosinya pada April 2023, ia telah menerima pujian daripada pembangun di seluruh dunia dan telah memperoleh lebih 2700+ bintang, termasuk pengiktirafan daripada pakar di syarikat utama.

Pada masa ini, alova@3.x telah dikeluarkan, diletakkan sebagai "alat permintaan generasi akan datang untuk aliran kerja yang diperkemas."

Saya telah mengekalkannya tanpa pampasan selama 30 bulan, dan versi telah mencapai 3.x. Dalam tempoh ini, melalui refleksi berterusan, penolakan dan pemikiran semula, saya menyasarkan untuk mencapai sesuatu yang belum dilakukan oleh alat permintaan lain, untuk menjadi alat yang benar-benar boleh membantu pembangunan bahagian hadapan. Saya percaya saya telah menemui arah yang boleh dipercayai.

Iaitu, untuk mencipta "alat permintaan generasi seterusnya untuk aliran kerja yang diperkemas", memaksimumkan bantuan kepada pembangunan bahagian hadapan dalam memperkemas proses integrasi API.

Di bawah ialah kisah penerokaan alovajs, yang juga merupakan kisah projek sumber terbuka dari penubuhannya.

Jika anda berminat dengan alovajs, saya dengan ikhlas menjemput anda untuk menyertai komuniti dan membuat kemajuan bersama.

• Sertai komuniti Discord

alovajs Berasal daripada Projek Kecil, tetapi Misinya ialah Melayari Lautan

Pada suatu hari pada bulan Mac 2022, disebabkan keadaan tertentu, saya mendapat idea untuk membangunkan Apl yang dipanggil "Con of goal." Diilhamkan oleh beberapa apl, saya berharap "Con of goal" boleh mencapai permintaan dan penyerahan data tanpa kelewatan, iaitu, mod respons segera, walaupun dalam keadaan rangkaian yang lemah atau tiada. Walau bagaimanapun, selepas mencari dalam talian dan tidak menemui penyelesaian yang sesuai, dan penyelesaian kemas kini optimistik serupa yang tidak memenuhi keperluan, keinginan terkutuk saya untuk berkongsi menyebabkan saya memutuskan untuk melaksanakannya dalam bentuk perpustakaan permintaan, yang merupakan titik permulaan alovajs, tetapi ia tidak mempunyai nama pada masa itu.

Mereka bentuk alovajs

Permulaan perpustakaan bukanlah reka bentuk, bukan pembangunan, tetapi menjelaskan keperluan

Petua profesional: Anda amat disyorkan untuk memahami secara ringkas bahagian gambaran keseluruhan alovajs untuk lebih memahami kandungan berikut.

Pada masa itu, tiada kedudukan produk, hanya mencipta perpustakaan JavaScript untuk memenuhi keperluan saya sendiri. Saya mengkaji perpustakaan permintaan sedia ada dan menyenaraikan keperluan berikut:

1. Sokongan untuk mod interaksi data yang lancar, iaitu, di bawah pemotongan rangkaian, ia masih boleh diserahkan tanpa berlengah-lengah, tanpa persepsi pengguna
2. Direka bentuk mengikut penggunaan popular pada masa itu, menjadikan antara muka lebih mesra pengguna
3. Satu set kod menyokong berbilang rangka kerja seperti Vue, React, dsb., dan persekitaran pengendalian JavaScript seperti penyemak imbas, React Native, UniApp dan Taro, dsb.
4. Penggunaan yang konsisten dalam berbilang persekitaran JavaScript
5. Memandangkan fungsi caching query reaksi adalah sangat baik, ini juga harus ditambah
6. Disebabkan pengaruh dan kesederhanaan axios, jadikan alovajs mudah untuk dimulakan dan reka bentuk harus serupa dengan axios

Kemudian, berdasarkan keperluan, API perpustakaan telah direka bentuk.

• Untuk keperluan 1, ia adalah titik permulaan untuk saya melakukan alovaj, tetapi ia tidak mudah. Reka bentuk pada masa itu adalah untuk menambah parameter senyap dalam konfigurasi useHook, yang boleh bertindak balas dengan segera kepada panggilan balik kejayaan, tetapi ia kemudiannya terbukti bermasalah dan direka bentuk semula, yang kini menjadi strategi interaksi data yang lancar

• Untuk keperluan 2, tiga useHook teras telah direka: useRequest, useWatcher dan useFetcher. Ini sangat biasa kepada semua orang, seperti useRequest ahooks, useAsyncState vueuse, react-query dan swr, tidak perlu dikatakan, ia sememangnya sangat mudah.

• Memandangkan reka bentuk useHook digunakan, rangka kerja yang berbeza akan mempunyai pengurusan keadaan yang berbeza, tetapi saya tidak mahu mencipta pustaka JavaScript untuk setiap rangka kerja seperti react-query. Oleh itu, untuk keperluan 3, spesifikasi untuk penyesuai stateHook, penyesuai permintaan dan penyesuai storan telah direka bentuk dan penyesuai yang berbeza boleh ditulis mengikut spesifikasi, mengasingkan persekitaran rangka kerja dan logik berkaitan persekitaran masa jalan ke dalam modul yang berasingan.

• Untuk keperluan 4, corak proksi contoh kaedah telah direka dan proksi contoh kaedah memanggil fungsi cangkuk penyesuai yang berbeza, supaya walaupun anda membangunkan sebarang aplikasi, anda boleh bermula dengan alovajs tanpa sebarang ketidakbiasaan, dan ia juga boleh dipindahkan dengan lancar.

• Untuk keperluan 5, perpustakaan JavaScript yang serupa melaksanakan caching dalam bentuk kunci tersuai, tetapi idea saya adalah untuk menumpukan pada maklumat permintaan. Senario biasa ialah apabila meminta antara muka yang sama dengan kaedah dan parameter permintaan yang sama, adalah perlu untuk memukul data tindak balas kali terakhir. Mengapa kita tidak menggunakan maklumat permintaan ini sebagai kunci caching? Oleh itu, alovajs telah mereka bentuk mekanisme caching automatik, yang didayakan secara lalai pada permintaan GET.

• Untuk keperluan 6, rujuk dan pelajari daripada aksios.

Reka bentuk ini sememangnya telah terbukti dari semasa ke semasa. alovajs sangat serasi dengan rangka kerja Vue, React, Svelte melalui kaedah penyesuai, dan juga boleh dijalankan dalam pelbagai persekitaran JavaScript seperti penyemak imbas, React Native, UniApp dan Taro, sambil mengekalkan kaedah penggunaan yang konsisten, yang telah memberi saya sinar harap.

Pada bulan-bulan berikutnya, walaupun alovajs dikeluarkan, ia tidak dinaikkan pangkat. Di satu pihak, ia adalah kerana saya menggunakannya dalam projek "Con of goal". Walaupun ia telah diubah suai dan ditambah baik dalam projek ini, ia masih sangat tidak lengkap, dan kedudukannya tidak jelas. Pengenalan versi awal adalah seperti ini.

Kemudian, projek "Con of goal" telah dibatalkan, tetapi alovajs masih berterusan.

Penerokaan Arah alovajs

Dengan obsesi untuk menjadi pengurus produk Internet, saya masih berharap untuk menjadikan alovajs sebagai produk yang berbeza. Saya sering bertanya kepada diri sendiri, apakah perbezaan antara alovajs dan perpustakaan permintaan lain? Mengapakah pengguna harus menggunakan alovajs? Ia sememangnya berbeza dengan perpustakaan lain dalam reka bentuk, yang bukan persoalan yang boleh dijawab dengan segera. Kemudian, saya cuba meletakkan arah pustaka permintaan sebagai "pustaka permintaan ringan" dan "pustaka permintaan bersatu berbilang hujung", tetapi semuanya dinafikan oleh saya sendiri, kerana ini tidak dapat membawa bantuan yang besar kepada pembangun, dan mereka tidak boleh dipanggil kelebihan.

Pada September 2022, satu peluang membuatkan saya menemui perpustakaan permintaan yang sangat baik berdasarkan Vue, vue-request. PenggunaannyaPagination dan useLoadMore serta-merta memberi inspirasi kepada saya. Bentuk pelaksanaan penomboran ini menyedarkan saya bahawa ini juga yang saya mahukan. Pada masa yang sama, ia menyedarkan saya tentang kuasa useHook. Saya boleh membahagikan modul mengikut senario permintaan, menggunakan useHooks yang berbeza untuk senario yang berbeza, dan interaksi data lancar yang dilaksanakan sebelum ini sebenarnya merupakan salah satu senario. Jika ini adalah arahnya, pembangun boleh memilih useHooks yang berbeza mengikut senario permintaan yang berbeza, yang bukan sahaja meningkatkan kecekapan pembangunan dan mengurangkan kerumitan pengekodan, tetapi juga menghalang bahagian hadapan junior daripada menulis kod yang tidak cekap, dan boleh menggunakan ciri teras dengan lebih baik. alovajs untuk mencapai prestasi yang lebih baik dan kurang tekanan pelayan. ciri permintaan, setakat ini, "perpustakaan strategi permintaan ringan" dipilih oleh saya.

Kemudian, untuk membimbing hala tuju reka bentuk masa hadapan alovajs, saya juga memperhalusi dan mengabstrak model senario permintaan (RSM) alovajs, terutamanya dibahagikan kepada empat proses berikut:

Request timing -> Request behavior -> Request event -> Response processing

Mari kita lakukan, saya mula membina semula alovajs 2.0 mengikut kedudukan ini, memisahkan fungsi interaksi data yang lancar daripada 1.0, dan mereka bentuk mekanisme perisian tengah untuk menyesuaikan diri dengan pembangunan lebih banyak strategi senario permintaan useHooks, mengkaji dan membangunkan strategi penomboran dan strategi interaksi data yang lancar.

• Strategi penomboran alovajs ialah apa yang saya fikir adalah penggunaan paling bergunaPaginasi. Ia menggunakan fungsi caching alovajs untuk mencapai pra-pemuatan data halaman depan dan belakang, carian data penomboran, penyahlantunan peringkat permintaan, dan menyediakan pengurusan automatik bagi fungsi pengeditan dan pemadaman baharu, serta menyegarkan semula data kod halaman yang ditentukan tanpa menetapkan semula.

• Strategi interaksi data yang lancar mengambil masa 4 bulan saya, sentiasa menemui jalan buntu dan sentiasa mereka bentuk semula hasilnya. Ia telah mencapai strategi yang membolehkan pengguna berinteraksi dengan data tanpa berlengah-lengah walaupun dalam persekitaran rangkaian yang lemah atau terputus, dan ia juga boleh memastikan kejayaan permintaan dengan lebih stabil. Saya mereka bentuk data maya, yang boleh digunakan sebagai ruang letak untuk data respons sebelum respons, membuatkan pengguna merasakan bahawa ia adalah tindak balas segera, dan kemudian menggantikan data maya dengan data sebenar selepas respons berjaya. Menurut hasil penerokaan semasa, senario penggunaannya boleh menjadi aplikasi seperti editor, modul tetapan sistem dan beberapa senarai yang lebih mudah.

Kemudian, modul strategi permintaan seperti useForm, useAutoRequest dan useSSE turut ditambah, tetapi ini masih jauh dari mencukupi.

Idea Alat Permintaan Generasi Seterusnya

Pada 13 Mei 2023, saya menerima isu sedemikian pada github

Pada mulanya, saya tidak begitu mempedulikan isu ini, hanya sekadar memahami fungsi menjana kod permintaan secara automatik untuk openAPI, dan menganggap ia sangat bagus, tetapi disebabkan tenaga yang terhad, saya tidak memikirkan secara mendalam tentang itu, dan saya tidak memikirkan arah tuju alovajs pada masa itu. Tetapi baru-baru ini, saya kadang-kadang berfikir tentang arah alovajs, dan isu yang masih terbuka ini sentiasa terlintas di fikiran saya, dan kemudian secara senyap-senyap menukar label isu ini daripada "permintaan ciri" kepada "permintaan ciri: disahkan" .

Pada masa yang sama, isu ini menyedarkan saya bahawa alovajs juga boleh mengecilkan jarak kerjasama antara bahagian hadapan dan bahagian belakang, dan seterusnya memudahkan aliran kerja pembangunan bahagian hadapan. Ini adalah arah pembangunan yang saya tetapkan untuk alovajs 3.0:

alovajs akan membantu pembangun memudahkan aliran kerja penyepaduan API ke tahap yang terbaik, anda hanya perlu menentukan API mana yang hendak digunakan (ini juga hasil pemikiran selama 3 bulan)

Pelan khusus saya adalah seperti berikut:

1. Langkah 1, 2, 3, 4, 6 dalam rajah di atas diselesaikan dengan menjana kod API secara automatik, tetapi pelan penjanaan kami akan pergi lebih jauh berbanding dengan alatan seperti openapi-generator. Ia secara automatik akan menjana jenis ts lengkap, fungsi permintaan penerangan lengkap, sama ada projek js atau projek ts, tidak perlu diperkenalkan, biarkan pembangun memanggil semudah memanggil location.reload terus, dan fungsi permintaan boleh melihat terus penerangan lengkap dan jenis parameter permintaan menggesa.

2. Memandangkan fungsi permintaan yang dijana secara automatik mempunyai penerangan yang lengkap dan gesaan jenis, pemalam vscode melengkapkan cara interaktif untuk mendapatkan semula API yang diperlukan dengan cepat dan anda tidak perlu lagi merujuk kepada dokumentasi API.

3. Selesaikan masalah jurang kerjasama bahagian hadapan dan bahagian belakang, dan sebarang perubahan dalam antara muka boleh dimaklumkan secara automatik kepada bahagian hadapan. Sekiranya terdapat perubahan yang ditemui semasa pembinaan projek, ralat akan dilemparkan untuk menghentikan pembinaan. Jika ia adalah projek ts, ralat juga akan dilemparkan semasa penyusunan, dan rekod perubahan juga boleh dilihat melalui pemalam vscode.

Berikut ialah video demo sambungan vscode.

Bagaimana untuk menyelesaikan langkah 6 "tulis logik permintaan kompleks"? Sudah tentu, ia adalah untuk menggunakan modul strategi permintaan, yang mempunyai ciri prestasi tinggi dan berasaskan adegan, dan pengguna boleh menggunakan jumlah kod yang sangat kecil untuk melaksanakan pelbagai fungsi permintaan adegan.

Pada Mac 2024, pelan pembangunan untuk alova@3.0 telah dirumuskan, dan mengambil masa 4 bulan untuk menstruktur semula hampir keseluruhan projek dengan ahli teras MeetinaXD, dan terdapat banyak pengoptimuman:

1. Seni bina asas telah direka bentuk semula dan satu set cangkuk boleh digunakan serentak dalam Vue, React, Svelte dan juga dalam gaya pilihan Vue.

2. Julat yang tersedia telah ditingkatkan ke bahagian pelayan. Anda boleh menggunakan alova dalam rangka kerja sebelah pelayan seperti express, koa dan nestjs, dan cangkuk pelayan strategi permintaan sebelah pelayan baharu telah ditambahkan.

3. 10 konfigurasi dalam alova@2.x telah ditamatkan dan 9 reka bentuk telah dioptimumkan.

Selain itu, bahagian paling penting dalam 3.0, pemalam vscode, yang bertanggungjawab ke atas ahli teras kami, czlin, juga tersedia, dan pada dasarnya ia telah mencapai matlamat yang kami tetapkan pada mulanya.

Setakat ini, alova@3.0 telah melepasi tempoh beta dan boleh digunakan secara stabil dalam persekitaran pengeluaran.

Hanya dengan penerokaan berterusan kita boleh menjadi lebih baik

Pada masa itu, artikel yang dikritik, Sudah tiba masanya untuk menggantikan axios anda berjaya dalam carian panas.

Memang tidak begitu baik apabila ia baru dilancarkan, tetapi saya tahu bahawa setiap produk tidak dicapai dalam sekelip mata, dan ia memerlukan masa untuk mengendap.

Komputer Apple 1 tidak mempunyai sarung pun pada mulanya

Perjalanan pembangunan Vue juga merupakan proses penerokaan dan kemajuan berterusan

Saya hanya terharu dengan perjalanan produk sebegitu, dan berterusan melakukan satu perkara adalah cara paling mudah untuk berjaya. Produk yang bagus perlu diuji selama beberapa tahun, apatah lagi alovajs yang baru wujud lebih kurang 1.5 tahun dan baru 8 bulan dihubungi oleh sesetengah orang. Dalam tempoh ini, ia juga telah meneroka penyelesaian yang lebih baik dan bergerak ke hadapan langkah demi langkah.

alovajs pada mulanya direka bentuk useHooks termasuk useRequest, useWatcher, useEffectWatcher, useManual, useController, dan kemudian secara beransur-ansur dikurangkan kepada hanya tiga cangkuk teras: useRequest, useWatcher dan useFetcher.

Komit alamat

Dalam reka bentuk permintaan selari, sama ada untuk melaksanakan borang yang serupa dengan Promise.all, atau bentuk semasa mengikat pada fungsi onSuccess, saya telah terjerat dalam beberapa versi, ditukar berulang-alik, dan yang berikut ialah reka bentuk responden yang terbengkalai pada tahun itu.

Rekod komit tidak ditemui

Untuk serasi dengan skim caching tak segerak seperti IndexedDB, saya pada mulanya cuba mereka bentuk penyesuai storan sebagai fungsi tak segerak, tetapi ia akan membawa beberapa masalah, dan kemudian cuba melaksanakan mekanisme acara melalui StorageConnector, yang masih belum cukup sempurna, dan akhirnya kepada mekanisme fungsi tak segerak localCache tersuai semasa.

Komit alamat

Saya juga berterima kasih kepada rakan-rakan yang telah menyokong dan menyumbang kepada alovajs. Berikut ialah beberapa tangkapan skrin, dan terdapat banyak sumbangan yang tidak disertakan.

Dan menambah butiran dokumen secara berterusan dan meningkatkan amalan terbaik, cuba pelan versi cache untuk mod pemulihan cache secara berani, dan untuk memberikan gesaan jenis ts yang lengkap untuk alovaj, cuba gunakan inferens jenis automatik untuk mengurangkan masalah pembangun menentukan jenis, dan sememangnya menghabiskan banyak usaha untuk mengoptimumkan dan serasi dengan rangka kerja UI yang berbeza, dsb.

Antaranya, dokumen itu telah banyak diubah dua hingga tiga kali. Saya berterima kasih kepada @Orange Peel kerana memberikan pendapat pengubahsuaian dokumen pertama, dan @Well kerana memberikan pendapat pengubahsuaian dokumen kedua, dan kemudian dokumen kami mempunyai reputasi sedemikian.

@pokok hijau membantu saya membuka idea baharu untuk alova.

Banyak perkara yang tidak jelas lagi, dan rekod pada npmjs memberitahu saya bahawa 146 versi telah dikeluarkan.

Terdapat juga ramai orang di github yang telah menimbulkan pepijat, dan saya juga telah membalas dan membetulkannya pada kali pertama. Saya benar-benar sangat bersyukur. Jika saya tidak dapat menilai masalah dengan segera, saya juga akan mengeluarkannya semula pada codesandbox dan menggunakan demo ini sebagai jambatan untuk komunikasi dengan pengguna.

AKHIR

Terima kasih banyak atas bacaan anda?, walau sesukar mana pun, jalan tetap perlu diteruskan.

Jika anda mengenali alovaj, sila pergi ke Github untuk memberikan bintang.

Jika anda ingin memahami alova, anda boleh melawati tapak web rasmi, di mana anda boleh mendapatkan dokumentasi yang lebih terperinci dan kod contoh untuk membantu anda memahami dan menggunakan alat ini dengan lebih baik.

Jika anda mempunyai sebarang pertanyaan, anda boleh menyertai sembang kumpulan berikut untuk perundingan, atau anda juga boleh menyiarkan Perbincangan dalam repositori github. Jika anda menghadapi masalah, sila serahkannya dalam isu github dan kami akan menyelesaikannya dalam masa terpantas.

• Sertai komuniti Discord

Kami juga mengalu-alukan anda untuk menyumbang kekuatan anda, sila pergi ke Panduan Sumbangan.

Atas ialah kandungan terperinci bulan sumber terbuka: Bagaimana saya mengekalkan alat permintaan Next-Gen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!