Axios 前端頁面使用axios呼叫後台介面

2022-03-06 16:03:45 字數 1131 閱讀 3297

專案基本情況

前端專案是用vue.js做的,前端起的服務url:http://localhost:8080/

後端專案是用node.js做的,後端起的服務url:http://localhost:3000/

現在前端要呼叫後端服務其中乙個介面,url:http://localhost:3000/goods,這個介面需要3個引數(page,pagesize,sort)

有如下兩種方式來呼叫後端介面: 

1)直接呼叫axios請求後端服務

如果你直接在介面上使用axos呼叫後端介面,你需要在axios裡面寫完整的後端介面url

但是,你覺得這樣是不是覺得,每次都要寫完整的介面url,這樣會很繁瑣呢?我只要呼叫後端/goods/這個介面就行了,有沒有一種辦法,可以去掉 http://localhost:3000/ 這個字首呢?答案是可以的,這就需要另外寫乙個js,來封裝axios,成為乙個http請求的基類。

2)通過對axios庫封裝成乙個http請求的基類

定義了http基類,我們就要呼叫他。

首先是在需要使用http請求的vue元件中引入 httpservice.js 

import httpservice from '@/services/httpservice'
在data()裡面,把httpservice賦值給http變數,便於後面呼叫

export default }}

然後通過http請求後端介面

這樣呼叫後端介面是不是就簡潔了很多呢?嘻嘻!

---end---

前端使用axios傳遞陣列後端使用List接收

在做專案時遇到乙個問題,前端用axios傳遞id陣列給後端,請求方法是delete,後端採用 requestbody來接受list然後捕捉到異常 required request body is missing 意味著後端未能成功接收到引數,這其中踩了許多坑 如果不是傳遞字串,不要使用josn.st...

前端對axios的封裝和使用

axios 是乙個基於 promise 的 http 庫。將axios封裝好後能更高效的開發並且方便維護,而且在以後的專案中也能直接套用,所以封裝好是必要的。在參考了很多方法後,我拼湊出了一套我認為很實用的方法。這個是功能性檔案是拼接url和引數的,讀一遍知道他有什麼功能就行了 const help...

前端Axios 最常用的Axios配置

基本配置 1.匯入 axios 依賴 2.建立 axios 例項 3.axios 4.請求引數配置 5.響應資料結構 引入方式 執行命令 npm install axios import axios from axios 我是demo學習,故而如下方式引入 script let baseurl le...