目錄

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，成都創(chuàng)新互聯(lián)面向各種領(lǐng)域：展覽展示等成都網(wǎng)站設(shè)計、成都全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計等建站排名服務(wù)。

axios介紹

axios的引入

axios中g(shù)et及post請求的基本使用

---

axios介紹

相信作為一名前端玩家，肯定少不了發(fā)送http網(wǎng)絡(luò)請求的時候。這個時候都會使用瀏覽器為我們提供的一個API，也就是Ajax。但是Ajax的使用需要我們每次通過 XMLHttpRequest 構(gòu)造函數(shù)去new一個 XML(小黃人) 的實例出來，然后去擬好請求體并發(fā)送http請求，最后通過XHR的onreadystatechange 進行狀態(tài)監(jiān)聽并拿到返回數(shù)據(jù)，并且還需要對于返回后的數(shù)據(jù)進行一系列的處理，比如轉(zhuǎn)為JS對象的類型，其中還不缺乏一系列的異步處理。如果在多個地方使用Ajax的話，這個代碼量是非常繁雜且維護也是十分困難的。就好比我們使用原生JS去做開發(fā)一樣，可擴展性和可維護性沒有保證、團隊協(xié)作困難、開發(fā)效率低下。如此的話，我們前端原生JS有前輩為我們開發(fā)的框架，那么，Ajax也有它自己的框架 --- Axios。

? Axios是基于promise可以用于瀏覽器和node.js的網(wǎng)絡(luò)請求庫。因為Ajax的請求是異步的，所以它的封裝是基于promise這個專門用于處理異步的api去實現(xiàn)的。所以在后續(xù)的數(shù)據(jù)接收中我們通常會在 .then 中進行操作。

Axios有一下幾種特性：

1、從瀏覽器創(chuàng)建?XMLHttpRequests，axios在封裝中已經(jīng)為我們new了實例對象供后續(xù)的使用。我們在使用過程中不用管axios的創(chuàng)建問題。

2、從 node.js 創(chuàng)建?http?請求，可以讓我們直接在node環(huán)境中進行使用。

? 3、支持?Promise?API，因為axios是基于promise進行的封裝操作，所以在后續(xù)的使用中我們無需太在意同步異步的問題。

4、攔截請求和響應(yīng)，axios為我們提供了強大的請求和響應(yīng)攔截api，可以讓我們在請求發(fā)送和數(shù)據(jù)返回之前去定義自己的邏輯操作。

5、轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)，通過axios為我們提供的transformRequest、?transformResponseapi等api，可以在發(fā)送和響應(yīng)中對data數(shù)據(jù)體進行任意轉(zhuǎn)換處理。

? 6、取消請求，使用cancelToken這個api可以讓取消上一次發(fā)送的請求，通?？梢匀ヌ幚砝缬脩舣偪癜l(fā)送請求的情況，類似于節(jié)流，當(dāng)服務(wù)器響應(yīng)數(shù)據(jù)后才會允許進行下次請求。

? 7、自動轉(zhuǎn)換JSON數(shù)據(jù)，使用axios返回的數(shù)據(jù)直接是JS對象類型的，不需要我們再使用JSON.parse的字符串轉(zhuǎn)對象方法。

? 8、客戶端支持防御XSRF

---

axios的引入

如果使用html文件使用axios的話，闊以通過一下代碼進行引入。

如果在項目中使用，直接 npm install axios 進行安裝即可。

---

axios中g(shù)et及post請求的基本使用

同樣是get請求，在axios中它能夠通過兩種方式實現(xiàn)。

1、通過調(diào)用get函數(shù)實現(xiàn)，這里的參數(shù)可以是一段字符拼接在url路徑后面，也可以再傳入一個配置對象{params:{參數(shù)名：值}}進去

axios.get('http://localhost:3000/user?ID=12345')
  .then((response) =>{
    // 處理成功情況
    console.log(response);
  })
  .catch((error) =>{
    // 處理錯誤情況
    console.log(error);
  })

// 如果不寫.get的話，默認是get請求
axios('/user,{params:{ID: 12345}}).then((response) =>{})

2、通過直接調(diào)用axios的實現(xiàn)，這里傳入一個配置對象。

axios({
	method: "GET",
	url: "http://localhost:3000/user?ID=12345",
    // 或者
    // url: "http://localhost:3000/user",
    // {params:{ID：12345}}
}).then((response) =>{
    // 處理成功情況
    console.log(response);
  })
  .catch((error) =>{
    // 處理錯誤情況
    console.log(error);
  })

axios同時也支持 async/await 的寫法?

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

---

post請求通常用于向服務(wù)器提交數(shù)據(jù)，下面看看它的寫法：

axios({ // 發(fā)送AJAX請求
	// 請求類型
	method: "POST",
	// 需要提交數(shù)據(jù)的URL路徑
	url: "http://localhost:3000/posts",
	// 設(shè)置發(fā)送的數(shù)據(jù)體(新增內(nèi)容)
	data: {
	    title: "已經(jīng)步入深秋了，樹葉漸漸的開始下落了！",
	    author: "不讀詩意",
    }
}).then((response) =>{
    console.log(response);
})
.catch((error) =>{
    console.log(error);
})

專題中還有axios的一系列深入學(xué)習(xí)，希望能夠有所幫助！

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

新聞名稱：一文帶領(lǐng)axios初學(xué)者走出霧霾的axios詳細介紹及基本使用(一)-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://chinadenli.net/article24/dgjdje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站排名、Google、微信小程序、軟件開發(fā)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)