vue專案封裝axios

2021-08-13 10:38:49 字數 2136 閱讀 6444

還是直奔主題吧,因為官方不推薦使用vue-resource,而是推薦axios,所以這篇文章分享給大家我在自己的專案裡如何封裝axios,雖說將axios在main.js裡寫入vue的原型鏈作為vue的屬性(vue.prototype.$http = axios),直接用最原始的方法也能進行請求

這樣也不是說不可以,但是真的在開發工作中,因為要統一設定請求的攔截,錯誤的處理,所以封裝axios是十分必要的。

首先這是我src下api的目錄

這是apiurl.js,將我們的請求名稱和url以及方法放在這裡

export

default

, getuserlist:

}

重點在於我們的apiutil.js

import axios from 'axios'

import from 'mint-ui'

const

generateapimap = (map) =>

_.foreach(map, function (value, key) )

return facade

}const

tomethod = (options) => , attachedparams, config = {}) =>

}// 建立axios例項

const

createapiinstance = (config = {}) =>

config = _.merge(_config, config)

return axios.create(config)

}const

err_check = (code, message, data) =>

return

false

}const

sendapiinstance = (method, url, params, config = {}) =>

let instance = createapiinstance(config)

instance.interceptors.response.use(response=> = response.data

if (err_check(code, message, data) && data) else

},error=> )

return promise.reject(error).catch(res=> )

} )

if (method === 'get')

} return instance[method](url, params, config)

}export

default

緊接著是index.js

import apiurl from

'./apiuri'

import apiutil from

'./apiutil'

const generateapimap = apiutil.generateapimap()

export default

可以看出來整體的想法就是在apiurl.js裡面只放請求名稱以及url和請求方法,然後再apiutil.js裡面去將其轉換為相應的方法,首先是在index.js裡面呼叫generateapimap,遍歷我們的apiurl將其中每個物件轉換為方法,也就是tomethod要做的事,緊接著在sendapiinstance裡去建立我們的axios例項,並設定***(我只做了返回攔截),到return instance[method](url, params, config)這一步也就將我們的請求封裝成功,下面是在頁面呼叫的時候

vue專案中封裝axios

axios.defaults.timeout 100000 請求超時時間。請求位址 其實做到這裡也可以,不用去單獨封裝get post 等請求也可以直接呼叫的。然後就可以在vue頁面去呼叫了 mounted function then function response catch function...

vue專案中封裝axios

首先,配置axios 在專案src目錄下建立request.js import axios from axios import store from store import from ant design vue import from ant design vue import vue from...

vue專案中封裝axios請求

1.前言 之前是我負責這個專案的搭建,及打包上線,整個專案都是我乙個人來做,所以介面寫的遍地都是,造成了瀏覽起來很難受,不便於維護 所以就打算封裝一下axios 建立乙個apis 的js檔案來集中管理介面,走著!首先考慮的是通過promise來封裝axios,使 看起來更清晰明了 2.1 專案中引入...