十分鐘,結合程式碼快速入門axios
theme: smartblue
持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第N天,點選檢視活動詳情
axios介紹
Axios 是一個基於 promise 網路請求庫,作用於
node.js
和瀏覽器中。 它是 isomorphic 的(即同一套程式碼可以執行在瀏覽器和node.js中)。在服務端它使用原生 node.jshttp
模組, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests。
由於Vue本身是不具備通訊工具的,故需要一個額外的通訊框架和伺服器進行互動,而作為最火熱的網路請求庫,axios自然也就成為了vue官方推薦的互動工具了,當然這也和他擁有極為優秀的功能特性分不開的:
特性
- 從瀏覽器建立 XMLHttpRequests
- 從 node.js 建立 http 請求
- 支援 Promise API
- 攔截請求和響應
- 轉換請求和響應資料
- 取消請求
- 自動轉換JSON資料
- 客戶端支援防禦XSRF
安裝
使用 npm:
js
npm install axios
在學習axios
之前,你必須掌握的知識是ajax
和es6新增的promise
,如果還沒有學會相關的內容,那建議看AJAX文件和阮一峰老師的ES6標準入門
Json-Server模擬介面
當我們在後端尚未給我們傳來介面的時候,我們可以通過node模組中的Json-server
來mock一個數據介面,當後端把介面給我們的時候也方便我們直接替換介面即可,對於前後端分離式開發無疑是有益的。
安裝Json-Server
javascript
npm install -g json-server
建立db.json
我們在vscode中去建立一個帶資料的db.json檔案,例如:
json
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"title": "今天天氣不錯啊",
"author": "張三",
"id": 2
}
}
啟動json-server
js
json-server --watch db.json
便會在終端視窗得到如下結果:
axios基本操作
在執行好json-server後,我們便可以開始嘗試axios的一些基本操作了
我們先引入axios和bootstrap(直接引入到當前頁面即可),再搭建一個基礎介面,能滿足我們基本操作的靜態頁面
```html
基本使用
```
GET請求
GET
命令的作用是獲取資料,接下來我們用實際程式碼來演示一下
javascript
// 獲取按鈕
// 返回與文件指定的選擇器組匹配的中的元素( 列表使用優先的先遍歷文件的節點)
const btns = document.querySelectorAll('button')
// 第一個按鈕
btns[0].onclick = () => {
axios({
// 請求型別
method: 'GET',
// URL
url: 'http://localhost:3000/posts/1',
}).then(response => {
console.log(response);
})
}
開啟網頁,檢視控制檯,發現輸出了db.json
中的資料
POST請求
POST
命令的作用是向原介面傳送資料,新增新的資料
js
// 新增一篇新的文章
btns[1].onclick = () => {
axios({
// 請求型別
method: 'POST',
// URL
url: 'http://localhost:3000/posts',
// 設定請求體
data: {
title: "今天天氣不錯啊",
author: "張三"
}
}).then(response => {
console.log(response);
})
},
成功執行後,我們開啟db.json
檢視資料的變化:
發現數據已經成功新增
PUT請求
PUT
命令的作用是更新資料,相當於資料庫中的“改”
我們修改第三個按鈕,來新增axios命令:
js
btns[2].onclick = () => {
axios({
// 請求型別
method: 'PUT',
// URL
// PUT需要傳id(此處需要修改的是id=3的資料)
url: 'http://localhost:3000/posts/3',
// 設定請求體
data: {
title: "今天天氣不錯啊",
author: "李四"
}
}).then(response => {
console.log(response);
})
},
點選按鈕,再檢視db.json
,發現數據已經發生了改變:
DELETE請求
delete
命令的作用是刪除資料,廢話不多說我們直接上程式碼
js
btns[3].onclick = () => {
axios({
// 請求型別
method: 'delete',
// URL
url: 'http://localhost:3000/posts/3'
}).then(response => {
console.log(response);
})
}
我們開啟控制檯:
發現返回的資料已為空,再開啟db.json
發現先前的POST
和PUT
修改的資料已經被刪除了
而這四個最基礎的操作,便組成了增刪改查
axios攔截器
這部分可以直接參考官方的文件
axios預設配置
當我們每次使用axios的基本操作的時候,我們會發現都會涉及到URL
,每次都要寫那麼一長串似乎有些太麻煩了一點了,我們發現不同的命令在URL
上面的區別似乎只有最後的一部分,那麼這時候,我們可以設定一個預設的URL地址,或者叫做基礎的URL,只需要在後面新增一部分即可。
除此之外,我們還可以設定預設的超時時間,當超過我們的設定時間仍未返回結果我們就取消請求,接下來,我們結合程式碼來看看:
javascript
axios.defaults.method = 'GET' //預設的請求型別為get
axios.defaults.baseURL = 'http://localhost:3000/' //設定基礎url
axios.defaults.parmams = {
id: 100
} //預設id為100
axios.defaults.timeout = 3000 //設定超時時間(3秒後如果結果還沒回來就取消請求)
是不是豁然開朗了,關於預設配置,我們還可以檢視官方的文件,這裡就不多贅述了
總結
總得來說,作為想要從事前端開發的人來說,axios是無疑必備的一項技能,學會了axios才能在後端人員給我介面的時候,能夠對他的介面“為所欲為”哈哈哈哈,希望這篇文章能夠順利讓你入門axios,祝您順利