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

語言: CN / TW / HK
時間 2022-06-02 05:15:09
主題:

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發現先前的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，祝您順利

「」