vue專案中簡單封裝axios成外掛程式來使用

2021-08-31 18:41:10 字數 1426 閱讀 2732

前提是準備工作都做好啦~~

在這之前一直使用的是 vue-resource用的也很順手,後面了解到公司使用的是 axios,就來學習使用axios,看axios 的官方文件覺得使用的方式和ajax也差不多哈~,都是些套路

axios 是乙個基於 promise 的 http 庫,可以用在瀏覽器和 node.js 中。它不可以像vue-resource那樣install之後vue.use()一下就可以全域性使用,每次使用都要引入,所以要將其封裝起來,並且也便於專案的請求配置**統一維護與管理。

下面就來介紹一下在我的專案中是怎麼簡單的實現 axios的全域性使用的(看了好多大神的,感覺都很厲害,也有結合vuex,但是現在我還不需要哈,就從最簡單的而開始,慢慢提高哈~~~)

這是我的 檔案設定

其中api.js: 統一存放專案的全部的 介面即 url

axios.js:專門用來 配置axios的config配置,以及設定***

http.js:就是用來封裝 axios 常用的請求的

netseriver.js:用來 把axios封裝成乙個 外掛程式可以vue.use()來全域性使用

注意:如果檔案你還使用了vue-reource,那就不要使用$http作為axios 的別名來使用了!會有衝突!

專案中具體使用

先引入請求的api.js (裡面包含專案所有的 url位址)

不帶引數的get請求:

帶引數的get請求:

post請求

以上就實現了像vue-resourse那樣直接用來請求啦~~

第一次自己封裝,小白乙個,不對的地方多多指教,反正在我的專案中是可以好好地使用滴~

其實有好多配置項我都沒有配置,只是還沒遇到問題,等遇到問題具體問題具體分析~

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 專案中引入...