一，安装axios

npm install axios --Save

二、封装request.js请求文件

在src目录下新建utils文件夹，文件夹下创建request.js文件

//引入axios
import axios from axios

//设置前段默认url值，后续参数中的url会自动拼接在其后
const baseUrl = http://***.***.***.***:****/

//请求拦截,在请求之前进行拦截，例如token验证，Nprogress加载等
axios.interceptors.request.use(function (config) {
})

//响应拦截
axios.interceptors.response.use(function (res) {

})

//封装请求类型实例
const map = new Map()
map.set(get, get)
map.set(put, put)
map.set(delete, del)
map.set(post, post)

//封装请求函数request

/*参数options格式
options = {
  url: /login, //请求地址，会自动拼接成baseUrl+url
  type: get,  //请求类型
  data: {name:,pass} //请求参数
}
*/

function request(options) {
  let type = options.type
  if (!type) {
    //直接抛出异常，让程序终止，此异常必须解决
    throw new Error(请指定使用POST,GET,DELETE,PUT方法)
  }
  return map.get(type.toLowerCase())(options)
}

//封装get请求
async function get(options) {
  return await axios.get(baseUrl + options.url, { params: options.data })
}

//封装del请求
async function del(options) {
  return await axios.delete(baseUrl + options.url, { params: options.data })
}

//封装put请求
async function put(options) {
  return await axios.put(baseUrl + options.url, options.data)
}

//封装post请求
async function post(options) {
  return await axios.post(baseUrl + options.url, options.data)
}

//导入request函数
export { request }

三、在页面使用请求

//引入request请求到当前文件
import { request } from ../utils/request

async login() {
  //准备参数
  let option = {
     url: users/login,
     type: post,
     data: this.loginUser,
  }
  //发送请求
  let { data: res } = await request(option)
}

四、通过对res的进行数据解构，就可以实现远程数据页面初始化。