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

「」