JavaScript asynchronous programming 4 -- promise error handling

charlee44 2021-05-04 12:08:22
javascript asynchronous programming promise error


1. summary

In the last article 《JavaScript Asynchronous programming 3——Promise Chain use of 》 in , adopt Promise Chain use of , Avoid multiple nested callbacks in the program ( Back to hell ). According to the previous article, we can know that ,Promise It's state based , success / The failed state will handle the corresponding callback function . generally speaking , The state of failure we want to be able to capture , Make it look like an anomaly (Error) Handle it the same way .

2. Detailed discussion

Promise Of then() Method has two parameters , One is a successful callback function , One is the failed callback function . You can omit the parameter of the failed callback function , While using Promise Of catch() Method , Catch the failed exception . for example , Let's improve on the example in the last article :

$(function () {
function get(url) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
// Even if it's 404 It will also enter the corresponding function , So we need to detect the State
if (req.status == 200) {
// Fulfill the promise , Returns the response text
resolve(req.response);
} else {
// Done not done , Returns an error
reject(Error(req.statusText));
}
};
// The corresponding function in case of an error
req.onerror = function () {
reject(Error("Network Error"));
};
// Send a request
req.send();
});
}
function getImg(uri){
return new Promise(function(resolve, reject){
var img = new Image();
img.onload = function () {
resolve(img);
};
img.onerror = function () {
reject(Error("Load Image Error!"));
}
img.src = uri;
});
}
var addressUri = "./1.json";
get(addressUri).then(function (response) {
var imgJson = JSON.parse(response);
return getImg(imgJson[0]);
}).catch(function (error) {
console.error("Failed!", error);
}).then(function(img){
$(img).appendTo($('#container'));
}).catch(function(error){
console.error("Failed!", error);
});
});

The process before and after improvement is very similar , But there are subtle differences . The former passes through Promise Of then() Handling exceptions , Only one of the function's callback functions and the failed callback functions will run ; The latter passes catch() Handling exceptions , It's more like JavaScript Of try/catch, stay try{} The error in will immediately go to catch{} block . In this case , It's easy to do something like try/catch Non blocking asynchronous version of exception operation :

$(function () {
function get(url) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
// Even if it's 404 It will also enter the corresponding function , So we need to detect the State
if (req.status == 200) {
// Fulfill the promise , Returns the response text
resolve(req.response);
} else {
// Done not done , Returns an error
reject(Error(req.statusText));
}
};
// The corresponding function in case of an error
req.onerror = function () {
reject(Error("Network Error"));
};
// Send a request
req.send();
});
}
function getImg(uri){
return new Promise(function(resolve, reject){
var img = new Image();
img.onload = function () {
resolve(img);
};
img.onerror = function () {
reject(Error("Load Image Error!"));
}
img.src = uri;
});
}
var addressUri = "./1.json";
get(addressUri).then(function (response) {
var imgJson = JSON.parse(response);
return getImg(imgJson[0]);
}).then(function(img){
$(img).appendTo($('#container'));
}).catch(function(error){
console.error("Failed!", error);
}).then(function(){
alert(" Image loading complete !");
});
});

In the improved example above , first then() And the second then() If there is an error in , The exception will be transferred to catch() in , And the third then(), The program will continue to run anyway .

3. Reference resources

  1. JavaScript Promises: An introduction
版权声明
本文为[charlee44]所创,转载请带上原文链接,感谢
https://javamana.com/2021/05/20210504120609708d.html

  1. Spring 3中异步方法调用
  2. AOP相关讨论
  3. jf能支持的表现层目前只有struts 1.x么?
  4. 在j2ee中实现一般java对象数据库的方法。
  5. FTP connecting windows and Linux
  6. Decorator design pattern - gene zeiniss
  7. Asynchronous method call in spring 3
  8. Discussion on AOP
  9. Is struts 1. X the only presentation layer supported by JF?
  10. The method of realizing general Java object database in J2EE.
  11. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  12. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  13. MySQL 的 in 查询不走索引?我拿什么拯救你!
  14. MySQL in query does not go index? What can I do to save you!
  15. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  16. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  17. Java小白入门必学!最全数据类型和运算符笔记,附实例
  18. Java Xiaobai introduction must learn! Notes on the most complete data types and operators, with examples
  19. Spring MVC请求与响应
  20. Spring MVC request and response
  21. Java 11已经不再完全免费,不要陷入Oracle的Java 11陷阱
  22. Vue.js比jQuery更容易学习
  23. 启动/删除Docker容器时出现问题 - 如何修复
  24. eclipse run on server时出现了错误信息.求急!!
  25. 请教高手一个关于lunce的问题:java.io.IOException: Cannot rename ...\segments.new
  26. Java 11 is no longer completely free. Don't fall into the Java 11 trap of Oracle
  27. Vue. JS is easier to learn than jQuery
  28. Problem starting / deleting docker container - how to fix it
  29. There is an error message in eclipse run on server!!
  30. Ask a question about lunce: java.io.ioexception: cannot rename... \ segments.new
  31. 从零搭建Spring Boot脚手架(2):集成mybatis
  32. 从零搭建Spring Boot脚手架(4):手写Mybatis通用Mapper
  33. 只知道java反射,宁知道内省吗?
  34. Build spring boot scaffold from scratch (2): integrate mybatis
  35. Build spring boot scaffold from scratch (4): handwritten mybatis general mapper
  36. Do you prefer introspection to reflection?
  37. ASP调用SDK微信分享好友、朋友圈
  38. ASP calls SDK wechat to share friends and circle of friends
  39. BAT 必问的 MySQL 面试题你都会吗?
  40. Do you know all the MySQL interview questions that bat must ask?
  41. ASP调用SDK微信分享好友、朋友圈
  42. ASP calls SDK wechat to share friends and circle of friends
  43. SpringCloud(六)Bus消息总线
  44. 详解JavaScript中的正则表达式
  45. Springcloud (6) bus message bus
  46. Explain regular expressions in JavaScript
  47. Java 响应式关系数据库连接了解一下
  48. Java14它真的来了, 真是尾气都吃不到了
  49. 视频:使用Docker搭建RabbitMQ环境
  50. Java responsive relational database connection
  51. Java14 it's really coming. I can't eat the exhaust
  52. Video: building rabbitmq environment with docker
  53. SpringCloud(六)Bus消息总线
  54. 详解JavaScript中的正则表达式
  55. Springcloud (6) bus message bus
  56. Explain regular expressions in JavaScript
  57. Docker实战:用docker-compose搭建Laravel开发环境
  58. Docker: building laravel development environment with docker compose
  59. 求助,JAVA如何获取系统当前所有进程
  60. 有人用过JMeter或用HttpUnit写过测试吗????