ios 加载html ajax,H5用axios代替Ajax调取服务器接口

功能需求：普通ajax调取后台接口需要写很多代码，且不好统一管理token，问大神同事说使用axios代替ajax，感觉很不错！

所需材料：一个a.html页面，一个config.js,一个api.js

下面进入正题

第一步：在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路径自己配好

第二步：配置config.js

/* 服务器地址 */

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方法稍有点不同，无参可以不写

/* ***************************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 => { })

//点击确定

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中统一管理接口了