【Axios】前端頁面使用axios調用后台接口

 

項目基本情況

前端項目是用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 {
    data () {
      return {
        http: Httpservice.getAxios,
      }
    }
}

　　

然后通過http請求后端接口

 

這樣調用后端接口是不是就簡潔了很多呢？嘻嘻！

 

 

---end---