告別回調，擁抱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)
      }
}