拒绝回调，拥抱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)

　　　　　　　　}

　　　　　　}

 

转载于:https://www.cnblogs.com/Yicoding/p/10114585.html