十分鐘,結合程式碼快速入門axios

語言: CN / TW / HK

theme: smartblue

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第N天,點選檢視活動詳情

axios介紹

Axios 是一個基於 promise 網路請求庫,作用於node.js 和瀏覽器中。 它是 isomorphic 的(即同一套程式碼可以執行在瀏覽器和node.js中)。在服務端它使用原生 node.js http 模組, 而在客戶端 (瀏覽端) 則使用 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發現先前的POSTPUT修改的資料已經被刪除了

而這四個最基礎的操作,便組成了增刪改查

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,祝您順利