告别回调,拥抱async await

时间:2022-09-21 19:37:32

之前使用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)
}
}

告别回调,拥抱async await的更多相关文章

  1. 拒绝回调,拥抱async await

    之前使用jquery中ajax,请求的结果需要写在回调函数里面,后面接触到了axios/fetch,使用了es6中Promise进行封装,这种链式结构调用,看起来比之前直观,可是还是没有解决回调的问题 ...

  2. 重构:从Promise到Async/Await

    摘要: 夸张点说,技术的发展与历史一样,顺之者昌,逆之者亡.JS开发者们,赶紧拥抱Async/Await吧! GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前 ...

  3. 图与例解读Async/Await

    JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...

  4. async/await剖析

    async/await剖析 JavaScript是单线程的,为了避免同步阻塞可能会带来的一些负面影响,引入了异步非阻塞机制,而对于异步执行的解决方案从最早的回调函数,到ES6的Promise对象以及G ...

  5. JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

    原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...

  6. node.js异步控制流程 回调,事件,promise和async/await

    写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...

  7. 【译】异步JavaScript的演变史:从回调到Promises再到Async/Await

    我最喜欢的网站之一是BerkshireHathaway.com--它简单,有效,并且自1997年推出以来一直正常运行.更值得注意的是,在过去的20年中,这个网站很有可能从未出现过错误.为什么?因为它都 ...

  8. Promise,async/await解决回调地狱

    先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...

  9. js中promise解决callback回调地狱以及使用async+await异步处理的方法

    1.callback回调地狱 function ajax(fn) { setTimeout(()=> { console.log('你好') fn() }, 1000) } ajax(() =& ...

随机推荐

  1. Web Service概念梳理

    计算机技术难理解的很多,Web Service 对我来说就是一个很难理解的概念:为了弄清它到底是什么,我花费了两周的时间,总算有了一些收获,参考了不少网上的资料,但有些概念说法不一.我以w3c和 一些 ...

  2. 给mac配置adb 路径

    给mac配置adb 路径 (1)找到对应的adb 所在路径 /Users/***/Library/Android/sdk/platform-tools (2)启动终端,输入 cd $Home (3)输 ...

  3. Facebook 网络模拟工具 ATC部署及使用

    废话引用: Facebook此前开源了增强网络流量控制工具 ATC,能利用WiFi网络模拟各种移动网络,测试智能手机和APP在不同国家地区和应用环境下的性能表现.ATC能够模拟2G.2.5G(Edge ...

  4. 模拟 --- hdu 12878 : Fun With Fractions

    Fun With Fractions Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit ...

  5. SharePoint 2013 点击"关注" 报错

    现象: 点击"关注" 报错. 解决办法: 1.确保bin文件夹下的.dll版本与web.config一致. 2.设置user porfile权限. 2.重启iis 结果如下:

  6. 淘宝分布式数据层:TDDL[转]

    淘宝根据自己的业务特点开发了TDDL(Taobao Distributed Data Layer 外号:头都大了 ©_Ob)框架,主要解决了分库分表对应用的透明化以及异构数据库之间的数据复制,它是一个 ...

  7. JavaScript 获取Select标签选中的项

    <select name="select1" id="select1" onchange=setInput()> <option value= ...

  8. python【第三篇】函数

    内容大纲: 1.函数基本语法与特性 2.参数与局部变量 3.返回值 4.递归 5.匿名函数lambda 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法与特性 函数的定义:函数是指将一 ...

  9. PHP 命名空间以及自动加载(自动调用的函数,来include文件)

    这篇文章的目的是记录 1. php中的自动加载函数 __autoload(), 和 spl_autoload_register()函数, 2 .php中命名空间的使用. 一.当不使用命名空间的时候 a ...

  10. 无法启动 IIS Express Web 服务器

    问题描述:我用的是vs2015,有时候打开自己的项目,点击调试运行,会失败,弹出窗口,告诉我,无法启动 IIS Express Web 服务器,我就纳闷了,刚才还好好,怎么这会就不行了,各种试,都不行 ...