HTTP 請求優化指南:Axios 和 Fetch 的比較
在前端開發中,處理 HTTP 請求是一個常見且重要的任務。JavaScript 提供了多種方式來發送網絡請求,其中最受歡迎的兩種方式分別就是 Fetch API 和 Axios。儘管兩者都能完成同樣的任務,即從客户端向服務器發送請求並接收響應,但它們在使用方式、功能及靈活性方面各有千秋,下面我們簡單瞭解下。 1. 基礎介紹 Fetch API Fetch API 是現代瀏覽器內置的一個標準 Jav
Nickname 火爆的鍵盤
Contributes374
Followers0
在前端開發中,處理 HTTP 請求是一個常見且重要的任務。JavaScript 提供了多種方式來發送網絡請求,其中最受歡迎的兩種方式分別就是 Fetch API 和 Axios。儘管兩者都能完成同樣的任務,即從客户端向服務器發送請求並接收響應,但它們在使用方式、功能及靈活性方面各有千秋,下面我們簡單瞭解下。 1. 基礎介紹 Fetch API Fetch API 是現代瀏覽器內置的一個標準 Jav
Nickname 火爆的鍵盤
前端項目如何規範文件命名 ls-lint 是一個非常快的文件和目錄名稱 linter,可方便約束項目目錄和文件的命名。 特點: 快速 依賴少 適用所有文件 配置簡單 安裝依賴 npm install @ls-lint/ls-lint -D 在 husky 加入 git hook: "husky": { "hooks": { "pre-commit": "ls-lint
Nickname JackZhouMine
Prettier 和 ESLint 是兩個互補的工具,它們共同確保代碼的風格一致性和質量。Prettier 負責格式化代碼,而 ESLint 則執行更復雜的靜態分析和規則檢查。 Prettier 作用: 自動化代碼格式化,確保代碼的縮進、括號、引號、換行等樣式一致。 不需要配置太多的規則,因為Prettier有一套默認的代碼風格。 支持多種編程語言,包括JavaScript、TypeS
Nickname 天涯學館
前言 最近在實現小圖片上傳的過程中剛開始我使用base64字符串做為後台接口參數傳遞給後台並解析保存也沒問題,但是發現第2次及之後就報下面的錯: org.springframework.core.io.buffer.DataBufferLimitException: Exceeded limit on max bytes to buffer : 262144 然後問了AI給的回覆如下: 這個問題通
Nickname Awbeci
參考文檔: 張鑫旭大佬的博客:https://www.zhangxinxu.com/study/201710/colorful-time-count-d... 改造後的效果: 源碼:vue3 script lang="ts" setup 模式版本: template div class="config-progress" :style="`--size:${si
Nickname jsoncode
背景 之前瀏覽過草料二維碼的網站,他的二維碼美化功能很強大,可以分別自定義碼眼和碼點的形狀和顏色,功能十分強大 💪! 碰巧之前寫過一個 npm 插件 qrcode-with-logos, 用於前端生成帶 logo 的二維碼。 而且在 github 的 issues 裏有外國友人 👨🦱 問我能否實現不同樣式的二維碼,剛好以此作為新需求,模仿草料二維碼的樣式和功能,開發了 qrcode-wit
Nickname suporka
前言 接上篇文章,我們瞭解到vite的本地構建原理主要是:啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想,我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目: 項目結構如上,服務使用koa搭建,bin指定cli可執行文件的位置 #!/usr/bin/env node
Nickname 南玖
今天開發中碰到一個問題,卡了挺久的記錄一下。 標題其實正確表達為: js-while循環中不要使用定時函數中的回調函數中對循環條件的自變量進行自增或者自減,否則會導致進程假死。 首先 let i = 0; while(i 10){ i++; console.log(i) } 首先這個沒問題,正常打印1,2....10; let i = 0; let timer; while(i
Nickname 陽哥
2024 年 6 月 26 日,第 127 屆 Ecma 大會批准了 ECMAScript 2024 語言規範,這意味着它現在正式成為標準。 https://github.com/tc39/ecma262/releases 1. Group By 分組 Map.groupBy() 將可迭代對象分組為一個新的 Map,Map中的 key由回調提供: Map.groupBy([0, -5, 3, -
Nickname 前端蛋卷
跨站腳本攻擊(Cross-Site Scripting,通常縮寫為XSS)是一種常見的網絡安全漏洞,它允許攻擊者將惡意腳本注入到其他用户會瀏覽的頁面中。 XSS攻擊的示例代碼可以幫助我們瞭解攻擊者可能使用的技術。但請注意,瞭解這些示例的目的是為了更好地防禦XSS攻擊,而不是用於惡意目的。 XSS 攻擊通常分為三種類型 1. 反射型XSS:攻擊者誘使用户點擊一個鏈接,該鏈接包含惡意腳本,當用户點擊時
Nickname 威哥愛編程
koa2批量上傳文件 目前的是為了實現批量導入md文件,發佈文章。這樣就不用自己一篇一篇同步文章了。一次可以同步幾千篇文章。 實現界面 內容 主要包含上傳的文件標題,文件大小,上傳狀態。 el-upload ref="uploader" v-model:file-list="fileList" drag multiple :accept="accept" :maxSize="maxS
Nickname 微芒不朽
我們在做前端開發的時候,曾遇到一些非常炫酷的宣傳頁。例如每一個蘋果產品的主頁面。我們會發現,這樣炫酷的頁面,總是跟隨我們鼠標滾輪的操作,在頁面中響應不同的事件。 一、瀏覽器的不同 我們都知道,需要在前端頁面中監聽到鼠標滾輪的事件,不同瀏覽器內核提供的方法是不同的。所以,每當我們需要監聽鼠標滾輪事件,就需要先判斷使用終端是用的什麼瀏覽器。 在前端,我們可以通過window.navigator.us
Nickname 愛米
今日圖撲軟件功能分享:我們將探討 HT 系統如何通過分組管理燈光、裁切體和流光,以提高場景光影效果的精準度和整體可控性。 HT 中的燈光、裁切體、流光是會影響它所在區域一定範圍內的其他節點的表現,如 場景中有個 A 燈光,默認情況下,場景中所有節點都是可以受到 A 燈光的影響。為了使這些影響更加準確,HT 提出一個解決方案“分組”,即將燈光、裁切體、流光進行分組管理,節點可設置接受哪些分組的影響
Nickname hightopo
項目中使用WangEditor(v4版本)的代碼塊功能,遇到這樣一個問題,如下所示 點擊插入後,會發現符號被替換了 這其實是WangEditor(v4版本)防XSS注入的處理方式 但是這樣做又會影響我們發表內容的觀看體驗 要解決這個問題,需要一點小寄巧 首先,先往代碼塊隨便寫點東西 然後,後點擊插入,我們就得到了一個代碼塊 然後,在編
Nickname happy2332333
背景 在前端開發中,HTTP 請求是與服務器進行數據交互的核心手段。無論是獲取數據還是提交數據,前端應用幾乎都離不開 HTTP 請求。在 uniapp 中,uni.request 是官方提供的用於發起 HTTP 請求的基礎 API。然而,直接使用 uni.request 存在一些問題和不足,比如: 代碼冗餘:每次發起請求時都需要編寫類似的配置代碼,導致代碼重複。 缺乏統一管理:沒有統一的地方
@renzhongdaoyuan_59170ca258c53
Nickname 零一行者
我們知道 Promise 一旦實例化之後,狀態就只能由 Pending 轉變為 Rejected 或者 Fulfilled, 本身是不可以取消已經實例化之後的 Promise 了。 但是我們可以通過一些其他的手段來實現終止 Promise 的繼續執行來模擬 Promise 取消的效果。 Promise.race 我們都知道 Promise.race 方法接收多個 Promise ,一旦這些 Pro
Nickname 前端蛋卷
通言:以前都是看網上別人的關於vue數據響應式原理理解,都是長篇大論的,不是很好理解,不能有效概括。直到學習了某位老師的課程我恍然大悟。得出結論:數據響應式就是指數據的改變以後通知函數的執行。 講一下實現的邏輯過程: 首先 js代碼: var user = { name: '合約路', birth: '2002-5-7', }; // 顯示姓氏 function show
Nickname 陽哥
海報分享功能在許多應用中應該是很常見的,因為它作為一種常用的應用推廣和拉新的方式。 接下來看個實際的案例,如下: 把任務拆解下: 如何繪製海報 如何把繪製後的海報保存到相冊 繪製海報 用 canvas 來繪製海報。 這裏需要了解基本的 canvas api,不熟悉可以先去了解下相關 Canvas API 定義 canvas 元素 template view class="
@renzhongdaoyuan_59170ca258c53
Nickname 零一行者
JavaScript 中的前瞻斷言(lookahead)和後瞻斷言(lookbehind)相信用過的小夥伴就知道它的威力了,在一些特定的需求場景下,可以做到四兩撥千斤的作用,今天讓我們來盤點一下在 JavaScript 正則表達式中這兩個秘密武器吧。 前瞻斷言和後瞻斷言,在其他語言的正則表達式中也存在,這個特性不是 JavaScript 的專屬 概念定義 不管是前瞻斷言還是後瞻斷言,最終目的都是尋
Nickname 前端蛋卷
早在今年4月份的時候,JetBrains為其多款IDE發佈了2024年度首個大版本更新:2024.1。 説時遲,那時快,這不JetBrains年度第二個大版本更新2024.2馬上又要來了。 不僅如此,這次官方還正式宣佈:在即將到來的2024.2版本中,將為所有JetBrains IDE啓用全新默認UI。 這也意味着之前搞了好幾年中間也放出來預覽和Beta的新UI,現在也官宣隨這次新版全面默認開啓
Nickname CodeSheep
雖然Promise是開發過程中使用非常頻繁的一個技術點,但是它的一些細節可能很多人都沒有去關注過。我們都知道,.then, .catch, .finally都可以鏈式調用,其本質上是因為返回了一個新的Promise實例,而這些Promise實例現在的狀態是什麼或者將來會變成什麼狀態,很多人心裏可能都沒個底。我自己也意識到了這一點,於是我通過一些代碼試驗,發現了一些共性。如果您對這塊內容還沒有把握,
Nickname 程序員白彬
在前端開發中,接口請求是一個非常基本的需求。幾乎每個項目都會針對自己的使用場景對接口請求操作進行一系列封裝。今天我們也來一步步封裝一個通用的請求工具。 使用效果 首先讓我們來看看封裝完後的使用效果吧。 首先我們將提供一個 defineApi 函數,用於定義接口的配置信息,包括 url,請求參數以及返回類型等,具體使用方法如下: const BASE_URL = 'https://example.c
Nickname 42
我一度以為自己很懂Promise,直到前段時間嘗試去實現Promise/A+規範時,才發現自己對Promise的理解還過於淺薄。在我按照Promise/A+規範去寫具體代碼實現的過程中,我經歷了從“很懂”到“陌生”,再到“領會”的過山車式的認知轉變,對Promise有了更深刻的認識! TL;DR:鑑於很多人不想看長文,這裏直接給出我寫的Promise/A+規範的Javascript實現。 gi
Nickname 程序員白彬
目錄 為什麼選擇Koa2? Koa2環境搭建 Koa2核心概念/中間件基礎/異步控制流 Koa2路由管理 Koa2請求響應處理 Koa2中間件使用 Koa2錯誤/異常捕獲與處理 Koa2模板引擎集成 Koa2靜態文件服務 Koa2集成數據庫 模型設計/ORM工具使用 接口身份驗證與授權 API接口設計 Koa2日誌記錄 CMS架構設計 CMS內容管理 CMS用户
Nickname 微芒不朽