Vue创建统一接口模式

方便拦截控制，并进行进一步的处理。
由上自下的数据流

需要用到的配置：

Axios 、 vue@cli

1. 首先创建Axios的实例对象,并未将来的值做好入参准备

// @/utils/request.js文件下
import axios from "axios"  //引入Axios

export default function(data) {
     //在此处实例化axios，后续的自定义配置数据将以参数（data）的形式传递进来
    return axios({ 
        method: data.method || 'GET',  //设置默认值
        url: data.url,                 //这个必须自定义
        headers: {                     //header默认值
            'Content-Type': data.header || 'application/x-www-form-urlencoded',
        }
    })
}

2. 接口进行二次封装，以方便自定义化和模块化

// @/api/index.js 文件下
import request from "@/utils/request"  //引入封装好的axios

export function getIndexData() {       
    return request({                       //这里要注意调用导入进来的request
        method: 'post',                    //在此处定义本接口的协议type
        url: "/api/v1/home/page",          //定义本接口的url
        headers: {                         
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
}
export function aaa() { ... }
export function bbb() { ... }
export function ccc() { ... }
....可以定义多个

3. 使用

// @/src/view/index/index.vue 文件下
<script>
import { getIndexData } from '@/api/index'     //注意这里的 {}

export default {
      mounted(){
          //调用方法,此处遵循promise写法
           getIndexData().then(resolve=>{
            
           }).catch(reject=>{
                
           })
      }
}
</script>

拦截部分尚未完善，待我再次编辑