拒绝回调，拥抱async await

Posted 2021-01-26 yicoding

　　之前使用jquery中ajax，请求的结果需要写在回调函数里面，后面接触到了axios/fetch，使用了es6中Promise进行封装，这种链式结构调用，看起来比之前直观，可是还是没有解决需要把结果写在回调函数里面，甚至axios/fetch相比原生ajax以及jquery中的ajax来说，不支持同步请求，这就导致：当一个请求需要的参数是依赖上一次请求返回的结果时，只能把第二次请求也写在第一次请求的回调里面，当内容过多时，就会被嵌套绕进去，写法上很不优雅。

　　es7中的async await正是解决这一尴尬问题的方法，配合try catch，代码简洁而优雅，跟回调说拜拜。

　　首先，如果是 jquery的项目：

　　　　1.使用Promise封装ajax

　　　　　　let ApiHost = ‘http://10.0.0.0:3000‘

　　　　　　function DoRequest(url, data=null, type=‘get‘) {

　　　　　　　　return new Promise((resolve, reject) => {

　　　　　　　　　　$.ajax({

　　　　　　　　　　　　type: type,

　　　　　　　　　　　　url: `${ApiHost }${url}?_rank=${new Date*1}`,

　　　　　　　　　　　　data: Object.assign({}, data),

　　　　　　　　　　　　crossDomain: true,

　　　　　　　　　　　　dataType: ‘json‘,

　　　　　　　　　　　　success: (res) => {

　　　　　　　　　　　　　　resolve(res)

　　　　　　　　　　　　},

　　　　　　　　　　　　error: (xhr, textStatus, errorThrown) => {

　　　　　　　　　　　　　　reject(xhr, textStatus, errorThrown)

　　　　　　　　　　　　}

　　　　　　　　　　})

　　　　　　　　})

　　　　　　}

　　　　2.调用

　　　　　　DoRequest(url, { id: 1 }).then(res => {

　　　　　　　　console.log(res)

　　　　　　}).catch(err => {

　　　　　　　　console.log(err)

　　　　　　})

　　　　3.使用async await改写

　　　　　　async function getList() {

　　　　　　　　try {

　　　　　　　　　　let data = await DoRequest(url, { id: 1 })

　　　　　　　　　　console.log(data)

　　　　　　　　} catch(err) {

　　　　　　　　　　console.log(err)

 

　　　　　　　　}

　　　　　　}