Vue 中添加Axios的全局请求和并且自定义请求

之前因为一个朋友说要在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的一样