在实现前后台分离之后，后台只需要给前台提供相应的接口（数据请求地址），而众多的接口如果没有很好的管理，对于开发和维护都是很不友好的，如果我们在每个页面需要获取数据的时候直接，通过Ajax调用传参如:
$.ajax({
url:'xxxx/aaa.do',
data:'{
"contentType":"application/x-www-form-urlencoded; charset=UTF-8"
"timer":"211564845656",
"sign":"478789414948419848",
"dataType":"json",
}',
type:'GET',
success:function(data){},
error:function(err){}
})
如果每次通过这样的方式有一个请求就要写一次，这样代码很长也不易阅读和维护。于是有人可能是把Ajax再分装一个方法，把公共的部分写进方法里，把一些如url、data当做参数传递,但这种方式依然不是很好。
第一步
那么今天我们重点来说一说如何通过async方法实现api接口调用。在jquery 2.x.x的版本之后$.ajax()都可以返回Promise对象,所以我们可以在async方法中await之后直接写 $.ajax()，然后再把它return出去如下所示，
const myRequest = async (params = {},url) => {
let data = params.query || {};
data.sign = '12d707e8610645a25fdeae6855a96507';
data.time = '20180523093655';
let res = await $.ajax({
url:url,
method: params.method || 'GET',
data:data,
})
return res;
}
第二步
我们可以把我们所有需要请求的，请求方法都写在一个单独的文件,命名为api.js。因为相同的请求地址请求的参数也有可能是不同的，所以我们需要把请求参数，作为新的方法的参数传递进去。
// api.js
const baseUrl= 'https://sujiefs.com/';
const getAdList = (params) => myRequest(params, apiMall + '/api/adverts/list');
const getAdList2 = (params) => myRequest(params, apiMall + '/api/adverts/list2');
const getAdList3 = (params) => wxRequest(params, apiMall + '/api/adverts/list3');
const getAdList4 = (params) => myRequest(params, apiMall + '/api/adverts/list4');
第三步
此时我们就可以根据需求在需要的地方调用对应的请求数据，
getAdList({query: {}}).then(res => console.log(JSON.parse(res)));
完整的测试demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
const apiMall = 'https://sujiefs.com/';
const wxRequest = async(params = {},url) => {
let data = params.query || {};
data.sign = '12d707e8610645a25fdeae6855a96507';
data.time = '20180523093655';
let res = await $.ajax({
url:url,
method: params.method || 'GET',
data:data,
})
return res;
}
const getAdList = (params) => wxRequest(params, apiMall + '/api/adverts/list');
/*async function getList() {
const json = await getAdList({
query: {}
});
console.log(JSON.parse(json));
}
getList();*/
getAdList({query: {}}).then(res => console.log(JSON.parse(json)));
</script>
</html>
到此，关于async/await 的分享就结束了，此文只是本人在学习过程中的一些总结，也怕自己忘了就把它大致的记了一下，如果我说的不对或有问题的地方烦请大家指出或提问，彼此也可以互相学习一下，如果能帮到你，请点个赞再走吧~~~~~
网友评论