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

2022-07-07 10:12:15 字數 1155 閱讀 2542

首先載入axios 

npm install axios -s

在src目錄下建立network檔案件,然後建立request.js檔案

檔案內容

// 配置api介面位址

var root = 'http://*****'//介面位址

// 引用axios

var axios = require('axios')

// 自定義判斷元素型別js

function totype (obj) ).tostring.call(obj).match(/\s([a-za-z]+)/)[1].tolowercase()

}// 引數過濾函式

function filternull (o)

if (totype(o[key]) === 'string') else if (totype(o[key]) === 'object') else if (totype(o[key]) === 'array')

}return o

}function apiaxios (method, url, params, success, failure)

axios()

.then(function (res)

} else else }})

.catch(function (err)

})}// 返回在vue模板中的呼叫介面

export default ,

post: function (url, params, success, failure) ,

put: function (url, params, success, failure) ,

delete: function (url, params, success, failure)

}

在main.js檔案裡掛載

import requests from './network/request.js'   // 記得改為你的路徑

vue.prototype.apis = requests // 請求介面命名

封裝完畢了,下面就是直接使用

this.apis.post('api/api/listcomm',, r => )

簡單的基於Vue axios請求封裝

具體實現思路 封裝之前需要用npm安裝並引入axios,使用乙個單獨的js模組作為介面請輸出物件,然後export dafult 這個物件。1.首先我們需要在vue例項的原型prototype中擴充套件乙個 http的方法取代axios vue.prototype.http axios這樣子就可以在...

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...