本文節選自霍格沃茲測試學院內部教材

一般在構建應用時需要訪問后端的 API 接口獲取后端數據并展示。做這件事的方法有很多種（比如 axios，vue-resource，fetch-jsonp），使用 promise 的 HTTP 客戶端 axios 是其中非常流行的一種方式。axios 也支持 RESTful 請求調用規范。

promise 是一個用來傳遞異步操作信息的對象，主要是用來解決回調的問題。

axios介紹

axios 是一個易用、簡潔且高效的 HTTP 庫。axios 主要是用于向后臺發起請求，或者在請求中做更多可控的功能（比如攔截請求，請求偽造等）。它是一個第三方插件，所以使用之前要先安裝。

安裝axios插件

github 地址：https://github.com/axios/axios

可以直接使用 npm 工具進行安裝

npm install --save axios

axios 特點

從瀏覽器中創建 XMLHttpRequests

從 node.js 創建 http 請求

支持 Promise API

攔截請求和響應

轉換請求數據和響應數據

取消請求

自動轉換 JSON 數據

客戶端支持防御 XSRF

axios實現RESTful請求規范

axios 其實和原生的 ajax，jquery 中的?$ajax?類似，都是用于向后端請求數據，axios 也是 Vue 官方推薦的插件。

基于 RESTful 風格的請求規范，基本請求方式有 5 種：

GET（SELECT）：從服務器取出資源（一項/多項）

POST（CREATE）：在服務器新建一個資源

PUT（UPDATE）：用來修改數據，需要把所有的字段傳過去，相當于全部更新

PATCH（UPDATE）：用來修改數據，是在 PUT 的基礎上改進的，適用于局部更新。比如只想修改用戶名，只傳用戶名的字段就可以了，而不需要像 PUT 一樣把所有字段傳過去

DELETE（DELETE）：從服務器刪除資源

代碼示例-注冊功能

注冊功能使用的是 POST 請求。具體請求參數與返回數據可以通過查看 API 文檔獲取（?http://stuq.ceshiren.com:8089/swagger-ui.html#/?）。一般開發者都會拿到這樣一個接口文檔說明。

從文檔可以查看到，后端服務的注冊接口接收請求的參數有三個 userName，password 和 email，如下：

{

"email": "string", "password": "string", "userName": "string" }

image1080×601 73.2 KB

也可以通過查看文檔，獲取到它的返回數據用于后續處理。

創建注冊頁面

對于頁面設計需要提前知道頁面的組成以及擺放位置，一般會有相應的頁面設計文檔或者參照頁面。一般推薦使用 Vuetify 完成組件的開發（提前安裝 Vuetify 插件）。

官方文檔：

https://vuetifyjs.com/en/api/v-form/

根據官方文檔，選擇適合自己項目的組件樣式，添加到頁面中。這里需要用到標題標簽

?，表單相關標簽?，以及按鈕標簽?。

SignUp.vue

解析上面的代碼：

1、首先，在 components/ 目錄下創建 SignUp.vue 文件。這里添加了一個?

?標題標簽，然后使用v-text-field?實現用戶名、密碼、郵箱的輸入框。使用v-btn?標簽實現注冊按鈕。

2、這里在v-text-field?標簽中使用?v-model?屬性對數據進行雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。在標簽中添加?data()?方法來獲取用戶輸入的數據（用戶名，密碼和郵箱）。

3、當點擊注冊按鈕時，會觸發?register()?方法。將用戶輸入的數據傳遞給后端接口，并拿到返回數據?res?，打印輸出到瀏覽器的 console 中。

4、在??中添加一個 div 樣式?sign-up?，設置寬為 500px，margin 外邊距設置為?0 auto?（0 為外邊距為 0，auto 指平分剩余空間，會展示居中的效果），text-align: center;?設置文字居中。

5、this.$api?向后端發送請求，這里會提前將$api?作為全局變量在main.js?中聲明

關于?main.js?等其他代碼參照貼子：

https://ceshiren.com/t/topic/12235

查看后端文檔

后端文檔：

http://stuq.ceshiren.com:8089/swagger-ui.html

Swagger 是一個規范并且完整的框架，用于生成、描述、調用和可視化 RESTful 風格的 Web 服務。Swagger 可以使前端開發者通過可視化頁面查看接口文檔。后臺開發也可以通過簡單配置實現文檔的自動生成。（官網地址：http://swagger.io/?），查看用戶管理中的注冊接口詳細信息。

注意：前端代碼中發送請求的參數名要與接口文檔中定義的參數名保持一致（參數名大小寫敏感）。

后端接收到前端 SignUp 組件發來的注冊請求，需要傳遞的參數如下圖：

image1080×601 73.2 KB

創建一個axios實例

可以使用 axios.create() 方法創建一個擁有通用配置的 axios 實例。

實際工作項目中，可能需要訪問多個服務地址，而這些服務請求和響應的結構也很可能是不同的，可以通過 axios.create() 創建不同的實例來處理。

在路徑?src?目錄下，新建目錄層級如下：

src/ api/ http.js

http.js?主要是用來編寫調用后端請求的地址以及請求的格式。下面配置后端服務的地址和頭信息，代碼如下：

import axios from 'axios' var instance = axios.create({ headers: { 'Content-Type': 'application/json' }, baseURL: 'http://stuq.ceshiren.com:8089' }) export default instance

axios?是向后端服務發請求的插件庫（提前已安裝）這里使用 import 完成導入

headers?是向后端傳參的頭部信息

baseURL?是后端服務的地址。

axios 與服務器交互

下面先創建兩個文件 api.js 和 user.js

user.js：用來管理所有用戶相關的后端接口。如果有其它同一類型的接口，也可以創建一個文件管理起來（比如任務管理，用例管理等）

api.js：主要是用來管理不同類別的接口文件，方便后續維護

目錄結構如下：

src/ api/ api.js user.js

user.js 代碼如下：

import axios from './http' const user = { signUp(params){ return axios.post('/user/register',params) } } export default user

解析上面的代碼：

先定義一個變量 user，然后注冊一個 signUp(params) 方法，方法中使用 axios 調用后端的接口服務（使用 GET 還是 POST 還是其它的動作，需要根據接口文檔確定）。然后通過?export default user?將 api 暴露出去，這樣其它的 js 文件才能調用到它。后面就會在 api.js 中引用這個 user 變量。

api.js?代碼如下：

import user from './user' const api = { user } export default api

上面的代碼，引用了當前目錄下 user.js 內的 user 變量。也可以在變量 api 中引用其它的 js 文件。api 定義好了之后，需要使用export default api?將 api 這個變量暴露出去，然后就可以在其它頁面中引用它了。

另外，所有頁面中需要用到的代碼和插件，都需要在 main.js 里面配置。

在 main.js 中添加下面代碼：

import api from './api/api' 省略... Vue.prototype.$api = api 省略...

import api from './api/api'?：將 api 這個變量導入到 main.js 中。

Vue.prototype.$api = api?：通過 Vue.prototype 定義一個?$api?變量，$api?將會在所有的 Vue 實例中可用，甚至在 Vue 實例被創建之前也可以調用到?$api?，注意一定要加上"$"符。

運行調試

將前端頁面的代碼開發完成，并且配置了相關的路由，就可以執行下面的運行命令：

npm run serve

然后，訪問地址：

http://localhost:8080/

輸入用戶名，密碼和郵箱，點擊注冊，然后在調試頁面的 network 中可以查看到返回結果，如下：

image1080×318 82.6 KB

從檢查頁面，network 中查看 register 這個接口的返回（Response）數據， 展示如下內容，說明我們請求后端服務成功的注冊了一個帳號。

{ "resultCode": 1, "message": "成功", "data": { "id": 198, "userName": "hogwarts", "password": "cf955f0d016f1da3fc79d468593057d5", "email": "hogwarts@ceshiren.com", "autoCreateCaseJobName": null, "startTestJobName": null, "defaultJenkinsId": null, "createTime": 1620716523579, "updateTime": 1620716523579 } }

這樣就使用 POST 的方式向后端發送了請求，完成了用戶的注冊功能。其它請求方式的具體用法，請查看官方文檔https://github.com/axios/axios。

更多技術文章： https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=hwyun×tamp=1651114611

API JavaScript Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。