之前因为一个朋友说要在Vue中集成UEditor我就搭建了Vue的环境,看着看着就上瘾了,我感觉代码有毒,我很容易上瘾,只要有空就想看看
今天终于集成了axios这个东西,因为我自己学Vue本身时间不长也就年前一两天开始,根据多年经验,习惯了分层,所以调通了请求并看到数据之后就想着把http请求这块抽出来,之前在网上有人说自定义httpUtils,我感觉那个想法不太完美。
第一步:话不多说上图,在src目录下创建http目录,并且创建请求工具类,文件httpRequestUtil.js
import axios from 'axios'
// 全局引入
var axiosIns = axios.create({
baseURL: 'https://easy-mock.com/mock/5c67cb3fadf6a5499fb8d31e/vuetest',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
})
// 目的只是为了能够输出初始化的 axios 的实例
function initAxiosIns () {
return axiosIns
}
//必须 导出不然没法访问
export default {initAxiosIns}
第二步:在main.js 中引入
第三部:使用,我创建了一个 axios.vue 中有两个方法,一个是测试get,一个是测试post请求的 (我用的是easy-mock.com的地址,没有自己搭建后台,我只是想测试下怎么发送get和post请求,所以完整的地址:https://easy-mock.com/mock/5c67cb3fadf6a5499fb8d31e/vuetest/qeery 就被分解开了)
methods: {
goback: function () {
window.history.back()
},
axiosvueGet: function () {
this.axiosIns.get('/query').then(function (response) {
console.log(response)
}).catch(function (error) {
console.log(error)
})
},
axiosvuePost: function () {
// this.$router.push({name: '/order/page1', params: {id: '1'}})
this.axiosIns.post('/upload', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
}
结果:只贴post的get的一样