目錄

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

axios介紹

axios的引入

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

---

axios介紹

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

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

Axios有一下幾種特性：

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

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

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

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

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

? 6、取消請(qǐng)求，使用cancelToken這個(gè)api可以讓取消上一次發(fā)送的請(qǐng)求，通常可以去處理例如用戶瘋狂發(fā)送請(qǐng)求的情況，類似于節(jié)流，當(dāng)服務(wù)器響應(yīng)數(shù)據(jù)后才會(huì)允許進(jìn)行下次請(qǐng)求。

? 7、自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)，使用axios返回的數(shù)據(jù)直接是JS對(duì)象類型的，不需要我們?cè)偈褂肑SON.parse的字符串轉(zhuǎn)對(duì)象方法。

? 8、客戶端支持防御XSRF

---

axios的引入

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

如果在項(xiàng)目中使用，直接 npm install axios 進(jìn)行安裝即可。

---

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

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

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

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

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

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

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) =>{
    // 處理錯(cuò)誤情況
    console.log(error);
  })

axios同時(shí)也支持 async/await 的寫法?

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

---

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

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

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

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

新聞名稱：一文帶領(lǐng)axios初學(xué)者走出霧霾的axios詳細(xì)介紹及基本使用(一)-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://newbst.com/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)