css

异步编程:

传统的异步解决方案采用回调函数和事件监听的方式

新方案:

  • ES6的新语法Promise

promise就是一个容器,里面包含着一个未来才会结束的事件(通常是一个异步操作)的结果。比起传统的异步解决方案(回调函数和事件),promise更合理更强大,把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

ES6规定,Promise是一个构造函数,接受一个函数作为参数,该函数有两个参数分别是resolve和reject:

/*** resolve 异步操作成功时调用的方法,并将异步操作的结果作为参数传递出去* reject 异步操作失败时调用的方法,并将报错传递出去*/
var promise = new Promise(function(resolve, reject) {var isSuccess = true // 异步操作是否成功if (isSuccess) {resolve(data)} else {reject(error)}
})

Promise实例生成以后,可以用then方法,传入两个函数,分别指定resolve状态和reject状态的回调函数(第二个函数可选):

promise.then(function() {    // 异步操作成功的处理,resolve状态
}, function() {  // 异步操作失败的处理,reject状态})

一个Promise对象的简单例子:

var timeout = function(ms) {var data = {list: Array(0),msg: 'success',status: 200}return new Promise(function(resolve, reject) {setTimeout(resolve, ms, data)})
}
timeout(1000).then(function(data) {console.log(data)
}, function(error) {console.log(error)
})

异步加载图片的例子:

function loadImageAsync(src) {return new Promise(function(resolve, reject) {var image = new Image()image.src = srcimage.onload = function() {resolve(image)}image.onerror = function() {reject(new Error(`加载图片失败,url:${url}`))}})
}var url = 'http://n.sinaimg.cn/ent/transform/250/w160h90/20190226/jjhJ-htptaqe5318645.jpg'
loadImageAsync(url).then((image) => {document.body.append(image)
}, (err) => {console.log(err)
})

  • ES2017引入的async函数

在普通函数前面加 async,就意味着函数内包含了异步操作。async函数返回一个Promise对象,可以使用then方法添加回调函数。

在执行的时候,一旦遇到 await 命令就会先返回,等到异步操作完毕,在接着执行函数体内后面的语句。

简单的例子,指定多少毫秒后输出一个值:

function timeout(ms) {return new Promise(function(resolve, reject) {setTimeout(() => {resolve()}, ms)})
}async function asyncPrint(ms) {await timeout(ms)console.log(`过去了${ms}毫秒,输出此语句`)
}asyncPrint(1000)

语法注意点:
1. async 函数返回 一个Promise 对象。async 函数内部return语句返回的值,会成为then回调函数的参数。

async function f() {return 'hello'
}f().then((data) => {console.log(data) // ‘hello’
})

2. async函数内部抛出错误,会导致返回的 Promise 对象编程reject状态,抛出的错误对象会被catch回调函数接收到。

async function f() {throw new Error('出错了')
}f().then((data) => {console.log('resolve data:', data)
}).catch((err) => {console.log('reject error:', err)
})

或者简写成

f().then(data => console.log(data),err => console.log(err)
)

防止出错的方法,也是将其放在try...catch代码块之中。

async function main() {try {const val1 = await firstStep();const val2 = await secondStep(val1);const val3 = await thirdStep(val1, val2);console.log('Final: ', val3);}catch (err) {console.error(err);}
}

  • Generator函数(略)

js

前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端知识整理相关推荐

  1. 前端为什么有的接口明明是成功回调却执行了.catch失败回调_Web前端:ES6是干什么的?(下)...

    大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:ES6是干什么的?(下)",喜欢Web前端的小伙伴,一起看看吧! 主要内容 Promise Generator A ...

  2. 前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端进阶高薪必看-手写源码篇(高频技术点)...

    前言 此系列作为笔者之前发过的前端高频面试整理的补充 会比较偏向中高前端面试问题 当然大家都是从新手一路走过来的 感兴趣的朋友们都可以看哈 初衷 我相信不少同学面试的时候最怕的一个环节就是手写代码 大 ...

  3. webstorm前端调用后端接口_软件测试面试题:怎么去判断一个bug是前端问题还是后端问题...

    大家好,在软件测试面试过程中,经常有面试官问到这个问题,那我们应该如何回答才好呢?少废话,直接看答案: 答案: 在页面上发现bug之后,要想判断这个问题属于后端还是前端,我就需要来判断这个页面背后调用 ...

  4. H5的jsapi微信支付:wx.chooseWXPay,ios手机在支付成功后不执行success中的回调函数

    对于iOS客户端支付成功后不进入chooseWXPay函数success的问题原因是:目前没有得到解答 临时解决方案: 支付成功后,安卓和iOS的返回都是{"errMsg":&qu ...

  5. 前端中怎么把网页多个文件夹的内容整合成一个_web前端学习笔记

    web前端的定义:是面向用户(浏览者)的互联网技术统称.主要包括Web界面的结构.Web界面的外观视觉表现以及Web界面的交互实现. HTML结构语言:超文本标记语言. Web前端的分类:前端设计和前 ...

  6. Nginx解决前端调用后端接口跨域问题

    Nginx解决前端调用后端接口跨域问题 参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...

  7. 前端与后端接口的交互案例

    一.案例描述 1,前端页面提供用户名,密码输入框. 2,通过Ajax发送请求到后端Serlvet. 3,后端Serlvet处理请求,根据输入的用户名和密码返回给前端不同信息 前端访问后端接口通过后端提 ...

  8. Java回调网址_极光短信- 回调接口 - 极光文档

    回调接口 设置并校验回调地址: 回调消息格式说明: 测试回调功能的方法: 设置回调地址 功能说明 设置并校验回调地址 操作路径 Step1:登入控制台 Step2:进入应用模版 Step3:右侧菜单中 ...

  9. App前端及后端接口,模拟数据及返回值

    App前端及后端接口,模拟数据 :接口文档 目录 1. 全局状态码 6 2. 前台 7 2.1. 首页 7 2.1.1. 商品分类列表接口 7 2.1.2. 展示轮播图接口 9 2.1.3. 展示广告 ...

最新文章

  1. 经典:盘点80后男人找老婆的20条标准
  2. switch语句能否作用在byte上,能否作用在long上,能否作用在String上?
  3. c++批量重命名_文件批量重命名?这个方法百试百灵
  4. BugkuCTF-Misc:宽带信息泄露
  5. 做技术的,这些观点真的扯淡!
  6. ios7 苹果原生二维码扫描(和微信类似)
  7. C++ I/O 流 格式控制(上)
  8. 浅谈JavaScript中的apply、call和bind
  9. 每秒570000的写入,MySQL如何实现?
  10. parsley.js正确使用姿势
  11. Log4Net Layout使用以及扩展
  12. 三菱a系列motion软体_通化三菱Q00JCPU
  13. EntityFramework中IEnumerable和IQueryable的含义和区别
  14. 自动驾驶 2-3 软件架构 Software Architecture
  15. 一步步入门搭建SpringSecurity OAuth2(密码模式)
  16. mysql查看表被哪个进程锁住_查询mysql 哪些表正在被锁状态
  17. C语言踢出字符,《懂球堂》| 大写的C字!如何踢出C罗一样的任意球
  18. struts教程笔记5
  19. R语言字符串相关操作
  20. 详解c语言欧拉函数,【基础数论】十分钟学会计算欧拉函数

热门文章

  1. python 读入图像文件和输出图像文件
  2. 提高(微)服务安全的非完全攻略
  3. 10 行 Python 代码自动清理电脑内重复文件,解放双手!
  4. 微信iOS版朋友圈可删除评论;周鸿祎:有的软件会偷拍偷录;银河麒麟操作系统V10发布| 极客头条
  5. 再见,Python!骨灰级程序员:用对这个方法,编程能力暴增!
  6. Nutanix推出云基础架构远程管理IT解决方案
  7. AI 新基建怎么做,腾讯云正式公布全景布局
  8. 腾讯面试官这样问我二叉树,我刚好都会 | 原力计划
  9. Wi-Fi 6 爆发的 2019
  10. 网易发“暴力裁员”内部说明;京东负责不幸员工的孩子费用到22岁;Linux kernel 5.4发布 | 极客头条...