主頁 > 前端設計 > jQuery Ajax 和 axios Ajax

jQuery Ajax 和 axios Ajax

2021-11-07 08:37:06 前端設計

一、區別：

axios是通過promise技術實作對ajax實作的一種封裝，本身上來說axios就是ajax，但是ajax卻不單單只是axios；jQuery也實作了對ajax技術的封裝，但是jQuery主要是對原生JavaScript進行封裝，封裝了js三大核心要素：ECMAScript、DOM、BOM，所以說jQuery封裝的ajax只是其中的一小部分，如果通過參考jQuery來進行ajax互動實在是顯得有所浪費資源，因此vue中封裝了axios來實作對ajax技術的單獨封裝，

二、ajax（Web資料互動方式）

Ajax即Asynchronous Javascript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest， 使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要多載（重繪）整個頁面，這使得程式能夠更快地回應用戶的操作，

特點：

使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護資料，這使得Web應用程式更為迅捷地回應用戶動作，并避免了在網路上發送那些沒有改變的資訊，

Ajax不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行，就像DHTML應用程式那樣，Ajax應用程式必須在眾多不同的瀏覽器和平臺上經過嚴格的測驗，隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世，同樣，也出現了另一種輔助程式設計的技術，為那些不支持JavaScript的用戶提供替代功能，

對應用Ajax最主要的批評就是，它可能破壞瀏覽器的后退與加入收藏書簽功能，在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，這是因為瀏覽器僅能記下歷史記錄中的靜態頁面，一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的可能差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程式中，卻無法這樣做，不過開發者已想出了種種辦法來解決這個問題，HTML5之前的方法大多是在用戶單擊后退按鈕訪問歷史記錄時，通過創建或使用一個隱藏的IFRAME來重現頁面上的變更，（例如，當用戶在Google Maps中單擊后退時，它在一個隱藏的IFRAME中進行搜索，然后將搜索結果反映到Ajax元素上，以便將應用程式狀態恢復到當時的狀態），

關于無法將狀態加入收藏或書簽的問題，HTML5之前的一種方式是使用URL片斷識別符號（通常被稱為錨點，即URL中#后面的部分）來保持追蹤，允許用戶回到指定的某個應用程式狀態，（許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點，）HTML5以后可以直接操作瀏覽歷史，并以字串形式存盤網頁狀態，將網頁加入網頁收藏夾或書簽時狀態會被隱形地保留，上述兩個方法也可以同時解決無法后退的問題，

進行Ajax開發時，網路延遲——即用戶發出請求到服務器發出回應之間的間隔——需要慎重考慮，如果不給予用戶明確的回應，沒有恰當的預讀資料，或者對XMLHttpRequest的不恰當處理，都會使用戶感到厭煩，通常的解決方案是，使用一個可視化的組件來告訴用戶系統正在進行后臺操作并且正在讀取資料和內容，

三、什么是 jQuery ？

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（框架），jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情，它封裝JavaScript常用的功能代碼，提供一種簡便的 JavaScript設計模式，優化HTML檔案操作、事件處理、影片設計和Ajax互動，
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件


作業原理：

jQuery的模塊可以分為3部分：入口模塊、底層支持模塊和功能模塊，

在構造jQuery物件模塊中，如果在呼叫建構式jQuery()創建jQuery物件時傳入了選擇器運算式，則會呼叫選擇器Sizzle（一款純JavaScript實作的CSS選擇器引擎，用于查找與選擇器運算式匹配的元素集合）遍歷檔案，查找與之匹配的DOM元素，并創建一個包含了這些DOM元素參考的jQuery物件，

瀏覽器功能測驗模塊提供了針對不同瀏覽器功能和bug的測驗結果，其他模塊則基于這些測驗結果來解決瀏覽器之間的兼容性問題，

在底層支持模塊中，回呼函式串列模塊用于增強對回呼函式的管理，支持添加、移除、觸發、鎖定、禁用回呼函式等功能；異步佇列模塊用于解耦異步任務和回呼函式，它在回呼函式串列的基礎上為回呼函式增加了狀態，并提供了多個回呼函式串列，支持傳播任意同步或異步回呼函式的成功或失敗狀態；資料快取模塊用于為DOM元素和Javascript物件附加任意型別的資料；佇列模塊用于管理一組函式，支持函式的入隊和出隊操作，并確保函式按順序執行，它基于資料快取模塊實作，

在功能模塊中，事件系統提供了統一的事件系結、回應、手動觸發和移除機制，它并沒有將事件直接系結到DOM元素上，而是基于資料快取模塊來管理事件；Ajax模塊允許從服務器上加載資料，而不用重繪頁面，它基于異步佇列模塊來管理和觸發回呼函式；影片模塊用于向網頁中添加影片效果，它基于佇列模塊來管理和執行影片函式；屬性操作模塊用于對HTML屬性和DOM屬性進行讀取、設定和移除操作；DOM遍歷模塊用于在DoM樹中遍歷父元素、子元素和兄弟元素；DOM操作模塊用于插入、移除、復制和替換DOM元素；樣式操作模塊用于獲取計算樣式或設定行內樣式；坐標模塊用于讀取或設定DOM元素的檔案坐標；尺寸模塊用于獲取DOM元素的高度和寬度，


通過 HTTP 請求加載遠程資料，（更多請求型別和描述，請參考官網（中文版）的詳細介紹）

jQuery 底層 AJAX 實作，簡單易用的高層實作見 $.get, $.post 等，$.ajax() 回傳其創建的 XMLHttpRequest 物件，大多數情況下你無需直接操作該函式，除非你需要操作不常用的選項，以獲得更多的靈活性，

最簡單的情況下，$.ajax()可以不帶任何引數直接使用，

注意，所有的選項都可以通過$.ajaxSetup()函式來全域設定，

回呼函式

如果要處理$.ajax()得到的資料，則需要使用回呼函式，beforeSend、error、dataFilter、success、complete，

  • beforeSend 在發送請求之前呼叫，并且傳入一個XMLHttpRequest作為引數，
  • error 在請求出錯時呼叫，傳入XMLHttpRequest物件，描述錯誤型別的字串以及一個例外物件（如果有的話）
  • dataFilter 在請求成功之后呼叫，傳入回傳的資料以及"dataType"引數的值，并且必須回傳新的資料（可能是處理過的）傳遞給success回呼函式，
  • success 當請求之后呼叫，傳入回傳后的資料，以及包含成功代碼的字串，
  • complete 當請求完成之后呼叫這個函式，無論成功或失敗，傳入XMLHttpRequest物件，以及一個包含成功或錯誤代碼的字串，

資料型別

$.ajax()函式依賴服務器提供的資訊來處理回傳的資料，如果服務器報告說回傳的資料是XML，那么回傳的結果就可以用普通的XML方法或者jQuery的選擇器來遍歷，如果見得到其他型別，比如HTML，則資料就以文本形式來對待，

通過dataType選項還可以指定其他不同資料處理方式，除了單純的XML，還可以指定 html、json、jsonp、script或者text，

其中，text和xml型別回傳的資料不會經過處理，資料僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回呼函式，

'''注意'''，我們必須確保網頁服務器報告的MIME型別與我們選擇的dataType所匹配，比如說，XML的話，服務器端就必須宣告 text/xml 或者 application/xml 來獲得一致的結果，

如果指定為html型別，任何內嵌的JavaScript都會在HTML作為一個字串回傳之前執行，類似的，指定script型別的話，也會先執行服務器端生成JavaScript，然后再把腳本作為一個文本資料回傳，

如果指定為json型別，則會把獲取到的資料作為一個JavaScript物件來決議，并且把構建好的物件作為結果回傳，為了實作這個目的，他首先嘗試使用JSON.parse()，如果瀏覽器不支持，則使用一個函式來構建，JSON資料是一種能很方便通過JavaScript決議的結構化資料，如果獲取的資料檔案存放在遠程服務器上（域名不同，也就是跨域獲取資料），則需要使用jsonp型別，使用這種型別的話，會創建一個查詢字串引數 callback=? ，這個引數會加在請求的URL后面，服務器端應當在JSON資料前加上回呼函式名，以便完成一個有效的JSONP請求，如果要指定回呼函式的引數名來取代默認的callback，可以通過設定$.ajax()的jsonp引數，

注意，JSONP是JSON格式的擴展，他要求一些服務器端的代碼來檢測并處理查詢字串引數，更多資訊可以參閱 最初的文章，

如果指定了script或者jsonp型別，那么當從服務器接收到資料時，實際上是用了<script>標簽而不是XMLHttpRequest物件，這種情況下，$.ajax()不再回傳一個XMLHttpRequest物件，并且也不會傳遞事件處理函式，比如beforeSend，

發送資料到服務器

默認情況下，Ajax請求使用GET方法，如果要使用POST方法，可以設定type引數值，這個選項也會影響data選項中的內容如何發送到服務器，

data選項既可以包含一個查詢字串，比如 key1=value1&key2=value2 ，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} ，如果使用了后者的形式，則資料再發送器會被轉換成查詢字串，這個處理程序也可以通過設定processData選項為false來回避，如果我們希望發送一個XML物件給服務器時，這種處理可能并不合適，并且在這種情況下，我們也應當改變contentType選項的值，用其他合適的MIME型別來取代默認的 application/x-www-form-urlencoded ，

高級選項

global選項用于阻止回應注冊的回呼函式，比如.ajaxSend，或者ajaxError，以及類似的方法，這在有些時候很有用，比如發送的請求非常頻繁且簡短的時候，就可以在ajaxSend里禁用這個，更多關于這些方法的詳細資訊，請參閱下面的內容，

如果服務器需要HTTP認證，可以使用用戶名和密碼可以通過username和password選項來設定，

Ajax請求是限時的，所以錯誤警告被捕獲并處理后，可以用來提升用戶體驗，請求超時這個引數通常就保留其默認值，要不就通過jQuery.ajaxSetup來全域設定，很少為特定的請求重新設定timeout選項，

默認情況下，請求總會被發出去，但瀏覽器有可能從他的快取中調取資料，要禁止使用快取的結果，可以設定cache引數為false，如果希望判斷資料自從上次請求后沒有更改過就報告出錯的話，可以設定ifModified為true，

scriptCharset允許給<script>標簽的請求設定一個特定的字符集，用于script或者jsonp類似的資料，當腳本和頁面字符集不同時，這特別好用，

Ajax的第一個字母是asynchronous的開頭字母，這意味著所有的操作都是并行的，完成的順序沒有前后關系，$.ajax()的async引數總是設定成true，這標志著在請求開始后，其他代碼依然能夠執行，強烈不建議把這個選項設定成false，這意味著所有的請求都不再是異步的了，這也會導致瀏覽器被鎖死，

$.ajax函式回傳他創建的XMLHttpRequest物件，通常jQuery只在內部處理并創建這個物件，但用戶也可以通過xhr選項來傳遞一個自己創建的xhr物件，回傳的物件通常已經被丟棄了，但依然提供一個底層介面來觀察和操控請求，比如說，呼叫物件上的.abort()可以在請求完成前掛起請求，

引數

url,[settings]ObjectV1.5

url:一個用來包含發送請求的URL字串，

settings:AJAX 請求設定，所有選項都是可選的，

V1.0settings:選項

acceptsMap

默認： 取決于資料型別，

內容型別發送請求頭，告訴服務器什么樣的回應會接受回傳，如果accepts設定需要修改，推薦在$.ajaxSetup()方法中做一次，

asyncBoolean

(默認: true) 默認設定下，所有請求均為異步請求，如果需要發送同步請求，請將此選項設定為 false，注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行，

beforeSend(XHR)Function

發送請求前可修改 XMLHttpRequest 物件的函式，如添加自定義 HTTP 頭，XMLHttpRequest 物件是唯一的引數，這是一個 Ajax 事件，如果回傳false可以取消本次ajax請求，

function (XMLHttpRequest) {
    this; // 呼叫本次AJAX請求時傳遞的options引數
}

cacheBoolean

(默認: true,dataType為script和jsonp時默認為false) jQuery 1.2 新功能，設定為 false 將不快取此頁面，

complete(XHR, TS)Function

請求完成后回呼函式 (請求成功或失敗之后均呼叫)，引數： XMLHttpRequest 物件和一個描述成功請求型別的字串， Ajax 事件，

function (XMLHttpRequest, textStatus) {
    this; // 呼叫本次AJAX請求時傳遞的options引數
}

contentsMapV1.5

一個以"{字串:正則運算式}"配對的物件，用來確定jQuery將如何決議回應，給定其內容型別，

contentTypeString

(默認: "application/x-www-form-urlencoded") 發送資訊至服務器時內容編碼型別，默認值適合大多數情況，如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會發送給服務器（即使沒有資料要發送）

contextObject

這個物件用于設定Ajax相關回呼函式的背景關系，也就是說，讓回呼函式內this指向這個物件（如果不設定這個引數，那么this就指向呼叫本次AJAX請求時傳遞的options引數），比如指定一個DOM元素作為context引數，這樣就設定了success回呼函式的背景關系為這個DOM元素，就像這樣：

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

convertersmapV1.5

默認： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

一個資料型別對資料型別轉換器的物件，每個轉換器的值是一個函式，回傳回應的轉化值

crossDomainmapV1.5

默認： 同域請求為false

跨域請求為true如果你想強制跨域請求（如JSONP形式）同一域，設定crossDomain為true，這使得例如，服務器端重定向到另一個域

dataObject,String

發送到服務器的資料，將自動轉換為請求字串格式，GET 請求中將附加在 URL 后，查看 processData 選項說明以禁止此自動轉換，必須為 Key/Value 格式，如果為陣列，jQuery 將自動為不同值對應同一個名稱，如 {foo:["bar1", "bar2"]} 轉換為 "&foo=bar1&foo=bar2"，

dataFilterFunction

給Ajax回傳的原始資料的進行預處理的函式，提供data和type兩個引數：data是Ajax回傳的原始資料，type是呼叫jQuery.ajax時提供的dataType引數，函式回傳的值將由jQuery進一步處理，

function (data, type) {
    // 對Ajax回傳的原始資料進行預處理
    return data  // 回傳處理后的資料
}

dataTypeString

預期服務器回傳的資料型別，如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智能判斷，比如XML MIME型別就被識別為XML，在1.4中，JSON就會生成一個JavaScript物件，而script則會執行這個腳本，隨后服務器端回傳的資料會根據這個值決議后，傳遞給回呼函式，可用值:

"xml": 回傳 XML 檔案，可用 jQuery 處理，

"html": 回傳純文本 HTML 資訊；包含的script標簽會在插入dom時執行，

"script": 回傳純文本 JavaScript 代碼，不會自動快取結果，除非設定了"cache"引數，'''注意：'''在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求，(因為將使用DOM的script標簽來加載)

"json": 回傳 JSON 資料 ，

"jsonp": JSONP 格式，使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回呼函式，

"text": 回傳純文本字串

errorFunction

(默認: 自動判斷 (xml 或 html)) 請求失敗時呼叫此函式，有以下三個引數：XMLHttpRequest 物件、錯誤資訊、（可選）捕獲的例外物件，如果發生了錯誤，錯誤資訊（第二個引數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"，Ajax 事件，

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一個會包含資訊
    this; // 呼叫本次AJAX請求時傳遞的options引數
}

globalBoolean

(默認: true) 是否觸發全域 AJAX 事件，設定為 false 將不會觸發全域 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件，

headersmapV1.5

Default: {}

一個額外的"{鍵:值}"對映射到請求一起發送，此設定被設定之前beforeSend函式被呼叫;因此，訊息頭中的值設定可以在覆寫beforeSend函式范圍內的任何設定，

ifModifiedBoolean

(默認: false) 僅在服務器資料改變時獲取新資料，使用 HTTP 包 Last-Modified 頭資訊判斷，在jQuery 1.4中，他也會檢查服務器指定的'etag'來確定資料沒有被修改過，

isLocalmapV1.5.1

默認: 取決于當前的位置協議

允許當前環境被認定為“本地”，（如檔案系統），即使jQuery默認情況下不會承認它，以下協議目前公認為本地：file, *-extension, and widget，如果isLocal設定需要修改，建議在$.ajaxSetup()方法中這樣做一次，

jsonpString

在一個jsonp請求中重寫回呼函式的名字，這個值用來替代在"callback=?"這種GET或POST請求中URL引數里的"callback"部分，比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器，

jsonpCallbackString

為jsonp請求指定一個回呼函式名，這個值將用來取代jQuery自動生成的隨機函式名，這主要用來讓jQuery生成度獨特的函式名，這樣管理請求更容易，也能方便地提供回呼函式和錯誤處理，你也可以在想讓瀏覽器快取GET請求的時候，指定這個回呼函式名，

mimeTypeStringV1.5.1

一個mime型別用來覆寫XHR的 MIME型別，

passwordString

用于回應HTTP訪問認證請求的密碼

processDataBoolean

(默認: true) 默認情況下，通過data選項傳遞進來的資料，如果是一個物件(技術上講只要不是字串)，都會處理轉化成一個查詢字串，以配合默認內容型別 "application/x-www-form-urlencoded"，如果要發送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false，

scriptCharsetString

只有當請求時dataType為"jsonp"或"script"，并且type是"GET"才會用于強制修改charset，通常只在本地和遠程的內容編碼不同時使用，

statusCodemapV1.5

默認: {}

一組數值的HTTP代碼和函式物件，當回應時呼叫了相應的代碼，例如，如果回應狀態是404，將觸發以下警報：

$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

success(data, textStatus, jqXHR)Function,Array

請求成功后的回呼函式，引數：由服務器回傳，并根據dataType引數進行處理后的資料；描述狀態的字串，還有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 物件 ，在jQuery 1.5， 成功設定可以接受一個函式陣列，每個函式將被依次呼叫， Ajax 事件，

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 呼叫本次AJAX請求時傳遞的options引數
}

traditionalBoolean

如果你想要用傳統的方式來序列化資料，那么就設定為true，請參考工具分類下面的jQuery.param 方法，

timeoutNumber

設定請求超時時間（毫秒），此設定將覆寫全域設定，

typeString

(默認: "GET") 請求方式 ("POST" 或 "GET")， 默認為 "GET"，注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但區域分瀏覽器支持，

urlString

(默認: 當前頁地址) 發送請求的地址，

usernameString

用于回應HTTP訪問認證請求的用戶名

xhrFunction

需要回傳一個XMLHttpRequest 物件，默認在IE下是ActiveXObject 而其他情況下是XMLHttpRequest ，用于重寫或者提供一個增強的XMLHttpRequest 物件，這個引數在jQuery 1.3以前不可用，

xhrFieldsmapV1.5

一對“檔案名-檔案值”在本機設定XHR物件，例如，如果需要的話，你可以用它來設定withCredentials為true的跨域請求，

示例

描述:

加載并執行一個 JS 檔案，

jQuery 代碼:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

描述:

保存資料到服務器，成功時顯示資訊，

jQuery 代碼:

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

描述:

裝入一個 HTML 網頁最新版本，

jQuery 代碼:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

描述:

同步加載資料，發送請求時鎖住瀏覽器，需要鎖定用戶互動操作時使用同步方式，

jQuery 代碼:

 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

描述:

發送 XML 資料至服務器，設定 processData 選項為 false，防止自動轉換資料格式，

jQuery 代碼:

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

下面以代碼做一下演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax功能演示</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<h1>Ajax功能演示</h1>
	<input id="btn" type="button" value="Ajax測驗">
<script type="text/javascript">
$("#btn").click(function){
	//success方法會在服務器成功回傳資訊時候執行
	//方法在執行時候，方法引數都是服務器傳遞回來的JSON物件
	$.ajax({
		type:"GET",
		url:"ajax",
		dataTYype:"json",//資料型別
		success:function(result){
			console.log(result.message);
		}
	});
};
</script>	
</body>
</html>

四、Axios是什么？用在什么場景？如何使用？

Axios 是一個基于 promise 的 HTTP 庫，簡單的講就是可以發送get、post請求，說到get、post，大家應該第一時間想到的就是Jquery吧，畢竟前幾年Jquery比較火的時候，大家都在用他，但是由于Vue、React等框架的出現，Jquery也不是那么吃香了，也正是Vue、React等框架的出現，促使了Axios輕量級庫的出現，因為Vue等，不需要操作Dom，所以不需要引入Jquery.js了，

Axios特性（具體的引數，請求型別，以及配置參考官網有更加詳細的演示和介紹）

1、可以在瀏覽器中發送 XMLHttpRequests
2、可以在 node.js 發送 http 請求
3、支持 Promise API
4、攔截請求和回應
5、轉換請求資料和回應資料
6、能夠取消請求
7、自動轉換 JSON 資料
8、客戶端支持保護安全免受 XSRF 攻擊

Axios用在什么場景？

在特性里面已經有提到，瀏覽器發送請求，或者Node.js發送請求都可以用到Axios，像Vue、React、Node等專案就可以使用Axios，如果你的專案里面用了Jquery，此時就不需要多此一舉了，jquery里面本身就可以發送請求，

Axios如何使用？

安裝模塊

npm install axios

或者直接引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入模塊后可以直接使用

示例（一）

// GET
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

// POST
axios.post('/user', {
  name: 'Javan',
  website: 'www.javanx.cn'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
//上面的引數是可選的

//如果你想并發多個請求，可以看下方代碼

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求都執行完成才會執行
  }));

示例（二）

//除了上面的方式外，你可以通過向 axios 傳遞相關配置來創建請求，如：

// POST
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});


語法

axios(url[, config])
config

{
  // `url` 是用于請求的服務器 URL
  url: '/user',

  // `method` 是創建請求時使用的方法
  method: 'get', // 默認是 get

  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL，
  // 它可以通過設定一個 `baseURL` 便于為 axios 實體的方法傳遞相對 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允許在向服務器發送前，修改請求資料
  // 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
  // 后面陣列中的函式必須回傳一個字串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 對 data 進行任意轉換處理

    return data;
  }],

  // `transformResponse` 在傳遞給 then/catch 前，允許修改回應資料
  transformResponse: [function (data) {
    // 對 data 進行任意轉換處理

    return data;
  }],

  // `headers` 是即將被發送的自定義請求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即將與請求一起發送的 URL 引數
  // 必須是一個無格式物件(plain object)或 URLSearchParams 物件
  params: {
    ID: 12345
  },

  // `paramsSerializer` 是一個負責 `params` 序列化的函式
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作為請求主體被發送的資料
  // 只適用于這些請求方法 'PUT', 'POST', 和 'PATCH'
  // 在沒有設定 `transformRequest` 時，必須是以下型別之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專屬：FormData, File, Blob
  // - Node 專屬： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
  // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
  timeout: 1000,

  // `withCredentials` 表示跨域請求時是否需要使用憑證
  withCredentials: false, // 默認的

  // `adapter` 允許自定義處理請求，以使測驗更輕松
  // 回傳一個 promise 并應用一個有效的回應 (查閱 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 表示應該使用 HTTP 基礎驗證，并提供憑據
  // 這將設定一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設定的自定義 `Authorization`頭
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示服務器回應的資料型別，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默認的

  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` 是承載 xsrf token 的值的 HTTP 頭的名稱
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默認的

  // `onUploadProgress` 允許為上傳處理進度事件
  onUploadProgress: function (progressEvent) {
    // 對原生進度事件的處理
  },

  // `onDownloadProgress` 允許為下載處理進度事件
  onDownloadProgress: function (progressEvent) {
    // 對原生進度事件的處理
  },

  // `maxContentLength` 定義允許的回應內容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定義對于給定的HTTP 回應狀態碼是 resolve 或 reject  promise ，如果 `validateStatus` 回傳 `true` (或者設定為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默認的
  },

  // `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目
  // 如果設定為0，將不會 follow 任何重定向
  maxRedirects: 5, // 默認的

  // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執行 http 和 https 時使用的自定義代理，允許像這樣配置選項：
  // `keepAlive` 默認沒有啟用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定義代理服務器的主機名稱和埠
  // `auth` 表示 HTTP 基礎驗證應當用于連接代理，并提供憑據
  // 這將會設定一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設定的自定義 `Proxy-Authorization` 頭，
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // `cancelToken` 指定用于取消請求的 cancel token
  // （查看后面的 Cancellation 這節了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

示例（三）

//我們還可以使用自定義配置新建一個 axios 實體，并且可以在請求或回應被 then 或 catch 處理前攔截它們，

// 如檔案名叫http.js
import axios from 'axios'

// 創建實體時設定配置的默認值
var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 添加請求攔截器
instance.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  /**
    1、比如添加token之類的請求頭資訊
    2、添加每次請求loading等
  */
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

// 添加回應攔截器
instance.interceptors.response.use(function (response) {
  // 對回應資料做點什么
  /**
    1、集中處理回應資料（如錯誤碼處理）
  */
  return response;
}, function (error) {
  // 對回應錯誤做點什么
  return Promise.reject(error);
});

export default instance
如何使用上面的http.js???

import http from 'xxx/http'

http({
  method: 'POST',
  url: '/user',
  data: {
    name: 'Javan',
    website: 'www.javanx.cn'
  }
}).then((response) => {
  // 200回應
}, (err) => {
  // 500回應
})

示例（四）

//如何取消介面？？？
//場景：一個搜索框，每次輸入字符都會呼叫介面，這時候沒有辦法來知道那個介面資料放回是最后一次的，
//只能取消之前發起的相同介面，所以就有了取消介面，

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求（message 引數是可選的）
source.cancel('Operation canceled by the user.');

通過代碼對get\post\put\delete\restful這幾種請求進行演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入門案例</title>
	</head>
	<body>
		
		<h1>Ajax請求練習</h1>
		<!-- 使用步驟:
			1.匯入JS函式類別庫
			2.發起Ajax請求,之后業務處理.
		 -->
		 <script src="../js/axios.js"></script>
		 <script>
			/* axios請求方式
			 
				1.請求型別
				   1. get  執行查詢業務
				   2. post 執行form表單提交(登錄/新增)
				   3. put  執行修改操作 
				   4. delete 執行洗掉業務時.
				   
				2. axios語法
				   axios.get("url地址資訊","引數資訊")
						.then(function(args){
							
						})
						
				3. 關于args引數說明
					axios為了統籌請求狀態.將所有的資料封裝為
					promise物件
					
			 */
			
			/* 
			案例1: 利用axios獲取后臺用戶串列資訊
			url: http://localhost:8090/findAll 
			
			*/
			
			axios.get("http://localhost:8090/findAll")
				 .then(function(promise){
					 console.log(promise)
					 console.log(promise.data)
				 })
		 
		 </script>
	</body>
</html>
//GET-帶引數(方式1)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端呼叫</title>
	</head>
	<body>
		
		 <h1>前后端呼叫</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/* 需求1: 查詢id=1的用戶
			   
			   GET方式1: 動態拼接引數的寫法 
			   url: http://localhost:8090/axios/getUserById?id=1
			 */
			let url1 = "http://localhost:8090/axios/getUserById?id=1"
			axios.get(url1).then(promise => {
				console.log(promise.data)
			})
		 </script>
	</body>
</html>

//GET-帶引數(restFul格式)
/* 
				GET方式2: 利用restFul查詢資料
				需求:     查詢sex=女 age>18
				
				原因: restFul結構越來越受歡迎,則拼接restFul結構 變得繁瑣.
				模板字串:  
					語法: 一對反引號  ``
					取值: ${key} 形式取值
					優勢: 保留代碼的格式
					
			 */
			let sex2 = "女"
			let age2 = 18
			//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
			let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
			axios.get(url2).then(promise => {
				console.log(promise.data)
			})

//GET-帶引數(物件寫法)
/**
			 * GET方式3: 利用物件實作引數傳遞
			 * 需求3: 查詢 name="王昭君" sex=女 age=19
			 * 引數語法:
			 * 	 資料結構: {}
			 * 	 關鍵字key(固定寫法): params 
			 *   value: 用戶需要傳遞的值
			 */
			let user = {
				name: '王昭君', 
				sex: '女',
				age: 19
			}
			
			let url3 = "http://localhost:8090/axios/getUser"
			axios.get(url3,{params : user})
			     .then(promise => {
					 console.log(promise.data)
				 })

//Delete請求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DELETE請求</title>
	</head>
	<body>
		 <h1>前后端呼叫-DELETE請求測驗</h1>
		 <script src="../js/axios.js"></script>
		 <script>
		 
			/* DELETE測驗1:
			   需求: 洗掉ID=232的資料
			 */
			let url = "http://localhost:8090/axios/deleteById?id=232"
			axios.delete(url)
				 .then( promise => {
					 console.log(promise.data)
				 })
			
		 </script>
	</body>
</html>

//POST請求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POST請求</title>
	</head>
	<body>
		 <h1>前后端呼叫-POST請求測驗</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			
			/**
			 * 需求: 實作用戶新增操作
			 * 語法: axios.post(url,新增引數)
			 * 規則: 如果post/put 傳遞物件則直接賦值.
			 */
			let user = {
				name: '小燕子',
				age: 18,
				sex: '女'
			}
			let url = "http://localhost:8090/saveUser"
			axios.post(url,user)
			     .then(promise => {
					 console.log(promise.data)
				 })
			
			
			
		 </script>
	</body>
</html>


// PUT請求(一)
/**
			 * 需求: 要求將id="238" 
			 * 	     改為name="小鬼當家",age=4,sex=男
			 */
			let user = {
				id: 238,
				name: "小鬼當家",
				age: 4,
				sex: "男"
			}
			let url = "http://localhost:8090/axios/updateUser"
			axios.put(url,user)
				 .then(promise => {
					 console.log(promise.data)
				 })

//PUT請求(二)
/**
			 * 需求2: 要求將name="小燕子"
			 * 	      改為name="小鬼當家",age=18,sex=男
			 * 難點:  如果有多個引數,并且重復時 如何封裝?
			 * 解決方案: 1.restFul + 物件 
			 */
			let name = "小燕子"
			let user2 = {
				name: "小鬼當家",
				age: 18,
				sex: "男"
			}
			
			let url2 = `http://localhost:8090/axios/updateUserByName/${name}`
			axios.put(url2,user2)
				 .then(promise => {
					 console.log( promise.data)
				 })

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/350977.html

標籤：其他

上一篇：HTML5期末大作業：動漫網站設計——動漫櫻桃小丸子(6頁) HTML+CSS+JavaScript 學生DW網頁設計作業成品 關于動漫的HTML網頁設計

下一篇：JavaWeb servlet jsp 使用七牛云API上傳圖片

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂