十分鐘,結合代碼快速入門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,祝您順利