功能需求：
普通ajax调取后台接口需要写很多代码，且不好统一管理token
所需材料：
HTML页面 , Config.js , Api.js
正文部分：
第一步：在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路径自己配好
代码语言：javascript复制<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/api.js"></script>
<script src="../../js/a.js"></script>第二步：配置config.js
代码语言：javascript复制/* 服务器地址 */
var base_url = 'http://************'; //测试服务器
//var base_url = 'http://**********'; //正式服务器
/******************* 配置的拦截器 封装的axios ***********************/
// 创建axios实例
const service = axios.create({
baseURL: base_url, // api的base_url
timeout: 120000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
//config.headers['token'] = 66;
config.headers['Content-Type'] = "application/json";
// config.headers['id'] = window.sessionStorage.getItem("id");
// console.log(config.headers)
return config
}, error => {
// Do something with request error
// console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
const res = response.data
return res
},
error => {
console.log(error) // for debug
Toast('服务器异常, 请稍后重试')
return Promise.reject(error)
}
)第三步：在api.js放所有的接口，注意一下get方法和post方法稍有点不同，无参可以忽略
代码语言：javascript复制/* ***************************incoming*********************************** */
function findById(params) { //面签页面--根据apid查询已有信息
return service({
url: '/api/backend/approvalProcess/findById',
method: 'get',
params
})
}
function faceSignSave(params) { //面签页面--保存提交
return service({
url: '/api/backend/faceSign/save',
method: 'post',
data: JSON.stringify(params)
})
}第四步：在a.js使用,confirmBtn()为点击方法，faceSignSave()就是api中定义的接口名称,params 就是传的参数，
注意格式faceSignSave(params).then(res => { })
代码语言：javascript复制//点击确定
confirmBtn() {
const params = { //总的提交信息
id: this.apId, //混合传过来 业务流id
}
let that = this;
faceSignSave(params).then(res => {
if (res.code == 0) {
//do something
} else {
//do something
}
})
}接口多就能体现其优势，就会很方便在config.js中统一管理接口
