功能需求：普通ajax調(diào)取后臺接口需要寫很多代碼，且不好統(tǒng)一管理token，問大神同事說使用axios代替ajax宏蛉，感覺很不錯儿咱！
所需材料：一個a.html頁面庭砍，一個config.js,一個api.js
下面進(jìn)入正題
第一步：在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路徑自己配好
<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
/* 服務(wù)器地址 */
var base_url = 'http://************'; //測試服務(wù)器
//var base_url = 'http://**********'; //正式服務(wù)器
/******************* 配置的攔截器 封裝的axios ***********************/
// 創(chuàng)建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('服務(wù)器異常, 請稍后重試')
return Promise.reject(error)
}
)
第三步：在api.js放所有的接口，注意一下get方法和post方法稍有點不同混埠，無參可以不寫
/* ***************************incoming*********************************** */
function findById(params) { //面簽頁面--根據(jù)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 就是傳的參數(shù)，注意格式faceSignSave(params).then(res => { })
//點擊確定
confirmBtn() {
const params = { //總的提交信息
id: this.apId, //混合傳過來 業(yè)務(wù)流id
}
let that = this;
faceSignSave(params).then(res => {
if (res.code == 0) {
//do something
} else {
//do something
}
})
}
這樣就完成了钳宪，如果接口多了揭北，就會很方便在config.js中統(tǒng)一管理接口了
