拒絕回調，擁抱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 requestApi = {}
　　　　　　for (let key in apiMap) {
　　　　　　　　let api = apiMap[key]
　　　　　　　　requestApi[key] = function(params) {
　　　　　　　　　　let options = {
　　　　　　　　　　　　type: api[0],
　　　　　　　　　　　　url: `${config.ApiHost}${api[1]}`,
　　　　　　　　　　　　data: params　　　
　　　　　　　　　　}
　　　　　　　　　　return DoRequest(options)
　　　　　　　　}
　　　　　　}
　　　　　　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.調用

　　　　　　

　　　　　　requestApi.getGoodList({pageNum: 1, pageSize: 10}).then(res => {

　　　　　　　　console.log(res)

　　　　　　}).catch(err => {

　　　　　　　　console.log(err)

　　　　　　})

 

　　　　4.使用async await改寫

　　　　　　

　　　　　　async function getGoodList() {

　　　　　　　　try {

　　　　　　　　　　let data = await requestApi.getGoodList({pageNum: 1, pageSize: 10})

　　　　　　　　　　console.log(data)

　　　　　　　　} catch(err) {

　　　　　　　　　　console.log(err)

　　　　　　　　}

　　　　　　}