Vue中進行ajax請求的時候,需要使用一些較為復雜的代碼,而簡化這一過程需要使用到封裝。
import axios from 'axios' export default function ajax ({ url, method = 'GET', params = {}, data = {} }) { return axios({ method, url, params, data }) }
在上述代碼中,我們引入了axios庫,并且導出一個方法ajax, 注入進來一個對象,這個對象中包含了請求方式、請求url、傳遞的參數以及數據等,這種方式可以使請求接口更加方便。
接下來進行一個請求的具體示范:
import ajax from '@/utils/ajax' // 請求組件中定義api地址 let findCategoryApi = 'manager/category/findCategory' // findCategory內調用 // 請求數據 getCategoryData () { ajax({ url: this.findCategoryApi, params: this.searchData }) .then(res =>{ let result = res.data.data if (result) { this.tableData = result } }) .catch(() =>{}) }
在上面這個示例中,我們首先在組件開頭定義了一個api地址, 然后在請求的函數中,使用了封裝的ajax請求,并且傳入了url以及params參數,這個時候, ajax被調用后會發送一個請求到后端,并且將請求參數傳入到接口中,同時如果請求得到了數據, 則會返回一個包含了數據的promise,我們在then函數中進行數據的處理。
總結:在Vue中,封裝ajax請求有很多好處,不僅可以省去很多重復代碼,更是可以保證程序的簡潔和性能,同時由于現在前后端分離的趨勢, 使用這種做法甚至可以在多端共享。