如何快速封装一个axios最简单的功能，全局挂载使用。

第一步：首先使用命令安装axios； 

npm install axios -S

第二步：在src目录下，新建一个utils文件夹；在utils新建一个index.js文件将如下代码复制进去：

import axios from "axios";
// 创建 axios 实例
const http = axios.create({
  baseURL:"http://localhost:9999", // 基地址
  timeout:5000,
})
//请求拦截
http.interceptors.request.use(config => {
  // 其他操作 比如添加 token......
  return config
}, error => { // 错误
  return Promise.reject(error)
})
//响应拦截器
http.interceptors.response.use((response)=>{
  return response.data // 剥离data数据
},(error)=>{
    return Promise.reject(error)
})
// 导出get 和 post 方法
export default {
  get: function(url, params = null) {
    const config = {
      url: url,
      method: 'get',
      params
    }
    return http(config)
  },
  post: function(url, data = null) {
    const config = {
      url: url,
      method: 'post',
      data
    }
    return http(config)
  }
}

如果不想直接在index.js直接导出方法就直接在新建一个js文件http.js写一下内容：

import http from "./index";
const api= {
  get: function(url, params = null) {
    const config = {
      url,
      method: 'get',
      params
    }
    return http(config)
  },
  post: function(url, data = null) {
    const config = {
      url,
      method: 'post',
      data
    }
    return http(config)
  }
}
export default api

记得在index.js导出axios实例

export default http

第三步：在main.js中添加以下代码挂载在vue实例上： 

import api from './utils/http' // 导入http
Vue.prototype.$api= api // 挂载到vue实例上 就可以直接用this.$api.get()/post()调用接口

第四步：发起请求

使用express模拟了两个接口：

浏览器响应如下：