此版本封裝主要是對請求封裝,攔截什么的沒做處理。主要是處理了請求的方式是post還是get請求做了處理,新建一個(gè)http.js,代碼如下:
import Qs from 'qs'
import axios from "axios"
axios.defaults.timeout = 15000;
axios.defaults.transformResponse = [function (data) {
data = JSON.parse(data)
return data
}]
axios.interceptors.request.use(function(config) {
console.log("請求開始")
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use((res) => {
console.log("請求結(jié)束 ")
return res;
}, (error) => {
return Promise.reject(error);
});
function http(type,url, params,contentType) {
let contType = contentType=='json' ? 'application/json':'application/x-www-form-urlencoded'
let paramstranform = contentType == 'json' ? params : Qs.stringify(params)
if(type == "get"){
return new Promise((resolve, reject) => {
// alert("axios-token:::"+localStorage.token)
axios({
method:'get',
url:url,
headers: {'token' : localStorage.token},
params:params
})
// axios.get(url, { params: params },{headers : {'token' : localStorage.token}})
.then((res) => {
resolve(res.data)
}).catch(err => {
if (err == "Error: timeout of 15000ms exceeded") {
console.log("服務(wù)器請求超時(shí)")
return
}
alert(err)
})
})
}else{
return new Promise((resolve,reject)=>{
axios({
method:'post',
url:url,
headers: {'Content-Type': contType},
data:paramstranform
})
// axios.post(url,paramstranform,{headers:{'Content-Type': contType,'token' : localStorage.token}})
.then((res)=>{
resolve(res.data)
}).catch(err=>{
if(err == "Error: timeout of 15000ms exceeded"){
alert("服務(wù)器請求超時(shí),請刷新頁面重新進(jìn)入")
}
alert(err)
})
})
}
}
export default http
在在main.js里引用
import httpRequest from '@/config/http' 具體的地址還有文件名自己改寫
Vue.prototype.$http = httpRequest //定義一個(gè)全局變量
在文件或者模板文件里運(yùn)用如下;
getList(){
this.$http('post',this.baseUrl+'/tag/theme/list').then((res) => {
console.log(res)
});
}