告别回调，拥抱async await

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

　　es7中的async await是一个不错的解决办法，配合try catch，代码简洁而优雅，跟回调说拜拜。

对jquery中ajax的进一步封装：

1.接口配置(dev: 开发，test：测试，prd：生产)

const env = 'dev' // 使用哪个接口
function useConfig() {
　　let config = {
　　　　　dev: {
　　　　　　　ApiHost: 'http://10.0.0.0:3030',
　　　　　　　otherHost: '', // 设置多个接口
　　　　　},　　　　　　
　　　　　test: {
　　　　　　　ApiHost: 'http://10.0.0.0:8080',
　　　　　　　otherHost: '', // 设置多个接口
　　　　　},
　　　　　prd: {
　　　　　　　ApiHost: 'http://10.0.0.0:9090',
　　　　　　　otherHost: '', // 设置多个接口
　　　　　}
　　}[env]
　　　　　return config　　　　
}

2.使用Promise封装ajax

let apiMap = {
　　　login: ['POST', '/api/login'],
　　　getGoodList: ['GET',  '/api/getGoodList']
}
let config = useConfig()
let tradeApi = {}
for (let key in apiMap) {
　　let api = apiMap[key]
　　tradeApi[key] = function(params) {
　　　　let options = {
　　　　　　type: api[0],
　　　　　　url: `${config.ApiHost}${api[1]}`,
　　　　　　data: params　　　
　　　　}
　　　　return DoRequest(options)
　　}
}
let ApiHost = 'http://10.0.0.0:3000'
function DoRequest(options) {
　　return new Promise((resolve, reject) => {
　　　　　$.ajax({
　　　　　　　type: options.type,
　　　　　　　url: options.url,
　　　　　　　data: Object.assign({}, options.data),
　　　　　　　crossDomain: true,
　　　　　　　dataType: 'json',
　　　　　　　success: (res) => {
　　　　　　　　　resolve(res)
　　　　　　　},
　　　　　　　error: (xhr, textStatus, errorThrown) => {
　　　　　　　　　　reject(xhr, textStatus, errorThrown)
　　　　　　　}
　　　　　})
　　})
}

3.调用

tradeApi.getGoodList({pageNum: 1, pageSize: 10}).then(res => {
　　　console.log(res)
}).catch(err => {
　　　console.log(err)
})

4.使用async await改写

async function getList() {
　　try {
          let data = await tradeApi.getGoodList({pageNum: 1, pageSize: 10})
　　　     console.log(data)
      } catch(err) {
           console.log(err)
      }
}