Axios簡單說明,快速上手

Ajax:異步的JavaScript和XML

作用:

  1. 數據交換
  2. 異步交互

Axios:就是對原生Ajax進行封裝,簡化書寫,快速開發?

使用邏輯:?

首先要安裝Axios,可以通過npm在項目中安裝:

  1. 打開命令行工具,進入項目根目錄
  2. 運行以下命令來安裝Axios:
npm install axios
  1. 安裝完成后,你可以在項目中引入Axios來發送HTTP請求。在JavaScript文件中引入Axios的方法如下:
const axios = require('axios');

或者如果你是在瀏覽器環境中使用Axios,你可以通過<script>標簽引入CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

這樣就可以開始使用Axios來發送網絡請求了。

  axios({method:'GET',url:"http://localhost:3000/api/data"}).then((result)=>{           //成功回調函數console.log(result.data);}).catch((err)=>{             //失敗回調函數alert(err);});

method:請求方式,GET/POST....
url:請求路徑
data:請求數據(POST)
params :發送請求時攜帶的url參數 如:...?key=val

Axios-請求方式別名?

為了方便起見,Axios已經為所有支持的請求方法提供了別名

在Axios中,可以通過提供不同的方法來發送不同類型的HTTP請求。下面是一些常用的Axios請求別名方法:

axios.request(config):發送自定義請求,可以定義請求的方法、URL、請求頭、請求體等配置。

axios.request({method: 'post',url: 'https://api.example.com/custom_request',data: {key: 'value'}
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.get(url[, config]):發送GET請求,配置可以包括params、headers等。

axios.get('https://api.example.com/get_data', { params: { id: 123 } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.delete(url[, config]):發送DELETE請求,可以設置URL和請求配置。

axios.delete('https://api.example.com/delete_data', { params: { id: 456 } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.post(url[, data[, config]]):發送POST請求,同時可以傳遞請求體數據和配置。

axios.post('https://api.example.com/post_data', { key: 'value' }, { headers: { 'Content-Type': 'application/json' } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.put(url[, data[, config]]):發送PUT請求,可以傳遞URL、請求體數據和配置。

axios.put('https://api.example.com/put_data', { key: 'value' })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

通過使用這些請求別名方法,你可以更加方便地發送不同類型的HTTP請求。

輸出先后順序:

?????? 原因:Ajax是異步請求

解決方法:

?異步同步化(讓代碼從上往下按順序執行)

?可以通過async、await可以讓異步變為同步操作。async就是來聲明一個異步方法,await是用來等待異步任務執行

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/72439.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/72439.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/72439.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

模型評估——acc、P、R、F值、交叉驗證、K折交叉驗證

模型評估&#xff1a;對預測函數地預測精度的評估。 多重回歸&#xff1a;涉及三個及其以上的變量的回歸問題。 評估模型的方法&#xff1a; 交叉驗證&#xff1a;將數據集分成測試集和訓練集&#xff0c;可以采用3&#xff1a;7或者2&#xff1a;8的比例方式進行劃分&#xff…

【Godot】Window類

&#xff08;參考自deepseek回答&#xff09; 在 Godot 引擎中&#xff0c;Window 是一個用于管理應用程序窗口的類。它是 Godot 4.0 引入的新特性&#xff0c;取代了舊版本中的 OS 類對窗口的管理功能。Window 提供了對窗口大小、位置、標題、模式等屬性的控制&#xff0c;使開…

JVM 2015/3/15

定義&#xff1a;Java Virtual Machine -java程序的運行環境&#xff08;java二進制字節碼的運行環境&#xff09; 好處&#xff1a; 一次編寫&#xff0c;到處運行 自動內存管理&#xff0c;垃圾回收 數組下標越界檢測 多態 比較&#xff1a;jvm/jre/jdk 常見的JVM&…

git submodule

git submodule git submodule 的作用是將一個 git 倉庫&#xff0c;最為另一個 git 倉庫的子模塊 比如 A 倉庫地址&#xff1a;gitgithub.com:xxxxxxx/A.git B 倉庫地址&#xff1a;gitgithub.com:xxxxxxx/B.git 一、克隆 A 倉庫 打開拉取的 A 項目根目錄 在 A 項目中添加 …

Compose 實踐與探索九 —— DrawModifier 解析

本篇講解 DrawModifier 的基本用法與代碼原理&#xff0c;介紹原理的目的在于可以判斷繪制與繪制的關系&#xff0c;繪制與布局的關系。知道達成某種繪制效果應該怎么寫&#xff0c;面對復雜的 Modifier 鏈時對效果有大致預判。 DrawModifier 管理繪制&#xff0c;需要以負責管…

華為手機助手輸入連接碼時光標亂跳

問題復現&#xff1a;輸入12345678&#xff0c;光標自動跳轉導致連接碼出現亂序情況。 千萬別試著找出規律&#xff0c;已試動態規律非大牛誤輕試 問題原因&#xff1a; 想啥呢&#xff1f;華哥的軟件又不是我開發我要Know Why干啥 我只需關心解決方案 &#xff08;可能時輸入…

《DeepSeek 開源 DeepGEMM:開啟AI計算新時代的密鑰》:此文為AI自動生成

《DeepSeek 開源 DeepGEMM&#xff1a;開啟AI計算新時代的密鑰》&#xff1a;此文為AI自動生成 引言&#xff1a;AI 計算的新曙光 在當今科技飛速發展的時代&#xff0c;人工智能&#xff08;AI&#xff09;無疑是最為耀眼的領域之一。從語音助手到自動駕駛&#xff0c;從圖像…

Windows 11 安裝Docker Desktop環境

1、確認CPU開啟虛擬化 打開任務管理器&#xff0c;切換到“性能”選項卡&#xff0c;查看 CPU 信息。若“虛擬化”狀態顯示為“已啟用”&#xff0c;則表示虛擬化已開啟&#xff1b;若顯示為“已禁用”&#xff0c;則需要在啟動時進入 BIOS 開啟虛擬化設置&#xff08;若顯示已…

STM32如何精準控制步進電機?

在工業自動化、機器人控制等場合&#xff0c;步進電機以其高精度、開環控制的特性得到了廣泛應用。而在嵌入式系統中&#xff0c;使用STM32進行步進電機的精確控制&#xff0c;已成為開發者的首選方案之一。 本文將從嵌入式開發者的角度&#xff0c;深入探討如何基于STM32 MCU…

【 <一> 煉丹初探:JavaWeb 的起源與基礎】之 JavaWeb 項目的部署:從開發環境到生產環境

<前文回顧> 點擊此處查看 合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、開發環境…

深度學習CNN特征提取與匹配

?一、CNN特征提取核心方法? ?基礎網絡架構? 使用卷積神經網絡&#xff08;如ResNet、VGG、MobileNet&#xff09;提取多層特征圖&#xff0c;通過卷積層自動學習圖像的局部紋理、形狀及語義信息?。 ?淺層特征?&#xff1a;邊緣、角點等低級特征&#xff08;Conv1-3&…

Vuex 高級技巧與最佳實踐

使用 map 輔助函數簡化代碼&#xff1a; javascript import { mapState, mapGetters } from vuexexport default {computed: {...mapState([num]),...mapGetters([doubleNum])} }模塊化開發&#xff1a; javascript // modules/student.js export default {namespaced: true,st…

算法題(98):大數加法

審題&#xff1a; 本題需要我們解決大數加法&#xff0c;大數直接運算會超出范圍&#xff0c;所以我們需要轉換成字符串一位位進行計算 思路&#xff1a; 方法一&#xff1a;高精度加法 我們將兩個大數的每一個位分別計算&#xff0c;然后頭插到answer字符串中即可 解題&#x…

C# Exe + Web 自動化 (BitComet 綠燈 自動化配置、設置)

BitComet GreenLight,內網黃燈轉綠燈 (HighID), 增加p2p連接率提速下載-CSDN博客 前兩天寫個這個&#xff0c;每次開機關機后要重來一遍很麻煩的索性寫個自動化。 先還是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相關的 端口記錄信息。 &#xff08;因為自…

基于 Docker 搭建 FRP 內網穿透開源項目

有些配置項不知道該不該用,不知道該在哪用,不知道怎么用,所以我自己寫個文章簡單記錄一下做個筆記 本文介紹的是基于 Docker 運行 frps 和 frpc,并通過 TCP 協議簡單穿透 SSH 和 HTTP,在觀看本文之前請確保你的機器已經安裝 Docker 服務端搭建 frps# 連接擁有公網 IP 的…

python---序列 (str,list,tuple)

一、 序列類型入門 python的數據類型&#xff1a;int float bool str 運算符 - * / % > < and or not 流程控制ifelsewhilefor掌握python的2大容器類型數值類型&#xff08;3個&#xff09;&#xff1a;int float bool序列類型容器(3個)&#xff1a;str &#xff1a; …

CSS元素層疊順序規則

CSS元素層疊順序規則 看圖說話總結: background/borderz-index(<0)blockfloatinline/inline-blockz-index(0,auto)z-index (>0)

刪除有序數組中的重復項(26)

26. 刪除有序數組中的重復項 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a; class Solution { public:int removeDuplicates(vector<int>& nums) {auto first nums.begin();auto last nums.end();auto result first;if (first last) {return std::…

Vue 概念、歷史、發展和Vue簡介

一、Vue概念 官方定義&#xff1a; 漸進式JavaScript 框架&#xff0c;易學易用&#xff0c;性能出色&#xff0c;適用場景豐富的 Web 前端框架。 Vue.js 是一個流行的前端JavaScript框架&#xff0c;由尤雨溪&#xff08;Evan You&#xff09;開發并維護。 它最初于2014年發…

ArcGIS Pro將有文字標注底圖切換為無標注底圖(在線地圖圖源)

今天介紹一下在ArcGIS Pro將有標注的地形底圖換成無標注的底圖。 大家在這項目底圖時候會經常調用ArcGIS Pro自帶的地形圖&#xff0c;但是這個地形圖自帶是有注記的&#xff0c;如下圖。 如何更改&#xff0c;才可以調用無文字注記的呢&#xff1f; 對于一個已經切好圖的有注記…