通过async/await写api接口

在实现前后台分离之后，后台只需要给前台提供相应的接口（数据请求地址），而众多的接口如果没有很好的管理，对于开发和维护都是很不友好的，如果我们在每个页面需要获取数据的时候直接，通过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 的分享就结束了，此文只是本人在学习过程中的一些总结，也怕自己忘了就把它大致的记了一下，如果我说的不对或有问题的地方烦请大家指出或提问，彼此也可以互相学习一下，如果能帮到你，请点个赞再走吧~~~~~

最后编辑于：2018.05.23 11:23:31