簡單的基於Vue axios請求封裝

2022-08-27 18:51:32 字數 693 閱讀 1922

具體實現思路=》封裝之前需要用npm安裝並引入axios,使用乙個單獨的js模組作為介面請輸出物件,然後export dafult 這個物件。

1.首先我們需要在vue例項的原型prototype中擴充套件乙個$http的方法取代axios=>vue.prototype.$http=axios這樣子就可以在元件中通過this.$http方法引用axios的get等內建api

2.將方法寫在乙個物件中方便呼叫=>

類似這個就將該請求方法寫在了xhr這個物件中,

3.通過=>

方法全域性註冊vue原型方法$xhr下的xhr物件,export之後可以在元件中通過下面方法實現呼叫,類似於jq的ajax的請求以及**格式

this.$xhr.xhr.httprequest({//xhr物件中封裝的ajaxrequest方法

url:'url位址',

data:{

//傳參

success:=>(data){//此處data相當於封裝的ajaxrequest方法中的res.data

//**處理邏輯

乙個簡單的基於vue-axios介面請求封裝完畢!!

vue axios 請求簡單實用的封裝!

首先載入axios npm install axios s 在src目錄下建立network檔案件,然後建立request.js檔案 檔案內容 配置api介面位址 var root http 介面位址 引用axios var axios require axios 自定義判斷元素型別js funct...

vue axios 請求封裝

import axios from axios import router from router index import from element ui import from utils loading import from utils auth import qs from qs 引入qs...

封裝vue axios請求

util.js import axios from axios import qs from qs import from vant h5用的這個 const apiurl xx 訪問介面位址 設定超時時間 請求頭等 axios.defaults.timeout 30000 axios.defaul...