import axios from 'axios'
 
//创建axios的一个实例
var instance = axios.create({
  baseURL:'',
  timeout: 6000
})
 
 
//------------------- 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
 
  return config;
}, function (error) {
  // 对请求错误做些什么
   
  return Promise.reject(error);
});
 
//----------------- 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
   
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  console.log('拦截器报错');
  return Promise.reject(error);
});
 
/**
 * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
 * 函数的参数及返回值如下：
 * @param {String} method 请求的方法：get、post、delete、put
 * @param {String} url   请求的url:
 * @param {Object} data  请求的参数
 * @returns {Promise}   返回一个promise对象，其实就相当于axios请求数据的返回值
 */
export default function (method, url, data = null) {
  method = method.toLowerCase();
  if (method == 'post') {
    return instance.post(url, data)
  } else if (method == 'get') {
    return instance.get(url, { params: data })
  } else if (method == 'delete') {
    return instance.delete(url, { params: data })
  }else if(method == 'put'){
    return instance.put(url,data)
  }else{
    console.error('未知的method'+method)
    return false
  }
}
 

3.根据后台文件划分的模块创建一个新的js文件，这是一个简单的示例

我将获取树结构数据，然后处理后的数据将显示在页面上。操作如下：

a。创建一个新的navigationTree.js，该文件专门用于管理我的树组件的界面（即上面的xxx.vue）。 （如果还有其他组件，例如aa.vue，也将使用该接口，您可以在api文件夹中创建另一个aa.js来管理aa.vue接口）

navigationTree.js

//navigationTree.js 用于获取导航树的树形json数据
import req from './http.js'  //引入封装好的axios
//在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
export const GETTREEDATA =params=>req('get','/GetTreeListForSoilByRegion',params)
//这里使用了箭头函数，转换一下写法：
//export const GETTREEDATA=function(req){
//  return req('post','/GetTreeListForSoilByRegion',params)
//}