方便拦截控制，并进行进一步的处理。
由上自下的数据流
需要用到的配置：
Axios 、 vue@cli
- 首先创建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',
}
})
}
- 接口进行二次封装，以方便自定义化和模块化
// @/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() { ... }
....可以定义多个
- 使用
// @/src/view/index/index.vue 文件下
<script>
import { getIndexData } from '@/api/index' //注意这里的 {}
export default {
mounted(){
//调用方法,此处遵循promise写法
getIndexData().then(resolve=>{
}).catch(reject=>{
})
}
}
</script>
拦截部分尚未完善，待我再次编辑
