javascript-前后端交互-Promise
目录
文章目录
内容
1、Promise基本用法
1.1、步骤
- 实例化Promise对象,构造函数中传递函数,该函数用于处理异步任务
- resolve和reject两个参数处理成功和失败2种情况,并通过.then获取处理结果
1.2、示例
-
代码1.2-1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let p = new Promise(function (resolve, reject) { setTimeout(() => { let flag = false if (flag) { resolve('hello') } else { reject('出错了') } }, 200); }) p.then(function (data) { console.log(data); },function (err) { console.log(err); }) </script> </body> </html>
-
结果:
- flag = false 等待0.2s,输出:出错了
- flag = true 等待0.2s,输出:hello
2、基于Promise处理Ajax请求
2.1、处理原生Ajax
-
启动后台:同上一篇博文’javascript-前后端交互-异步调用Ajax与Promise比较’,不在赘述
-
前端页面代码2-1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于Promise处理Ajax</title> </head> <body> <script> function queryData(url) { const p = new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return if (xhr.readyState === 4 && xhr.status == 200) { // 处理正常的情况 resolve(xhr.responseText) } else { reject('未能获取数据') } } xhr.open('get', url) xhr.send(null) }) return p } queryData('http://localhost:3000/data') .then(function (data) { console.log(data); }, function (err) { console.log(err); }) </script> </body> </html>
-
结果:
- 正常,输出:Hello,World!
- 异常,输出:未能获取数据
2.2、发送多次ajax请求
模拟多次请求结果存在依赖关系。
-
后台同上,前端页面代码2.2-1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多次发送ajax</title> </head> <body> <script> function queryData(url) { const p = new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return if (xhr.readyState === 4 && xhr.status == 200) { // 处理正常的情况 resolve(xhr.responseText) } else { reject('未能获取数据') } } xhr.open('get', url) xhr.send(null) }) return p } let url1 = 'http://localhost:3000/data' let url2 = 'http://localhost:3000/data1' let url3 = 'http://localhost:3000/data2' queryData(url1) .then(function (data) { console.log(data); return queryData(url2) }) .then(function (data) { console.log(data); return queryData(url3) }) .then(function (data) { console.log(data); }) </script> </body> </html>
-
结果:
Hello World! Hello data1! Hello data2!
3、then参数中的函数返回值
3.1、返回Promise示例对象
- 返回的实例对象会调用下一个then
3.2、返回普通值
- 返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
- 那么这个then是谁调用的呢?
- 答案是生成的默认的Promise对象,保证链式操作
3、Promise常用API
3.1、实例用法
-
p.then():得到异步任务的正确结果
-
p.catch():得到异步处理的错误结果
-
p.finally():不管异步任务的结果如何,都会执行
-
前端示例代码3.1-1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 异步任务 function instanceAPI() { return new Promise(function (resolve, reject) { setTimeout(() => { let flag = true if (flag) { resolve('hello') } else { reject('出错了') } }, 200); }) } instanceAPI() .then(function (data) { console.log(data); }) .catch(function (err) { console.log(err); }) .finally(function () { console.log('任务结束'); }) </script> </body> </html>
-
结果:
-
flag=true:
hello 任务结束
-
flag=false
出错了 任务结束
-
3.2、对象方法
-
Promise().all():并发处理多个异步任务,所有任务执行完成才能得到结果
-
Promise().race():并发处理多个异步任务,只要有一个任务完成就能得到结果
-
示例代码3.2-1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多次发送ajax</title> </head> <body> <script> function queryData(url) { const p = new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return if (xhr.readyState === 4 && xhr.status == 200) { // 处理正常的情况 resolve(xhr.responseText) } else { reject('未能获取数据') } } xhr.open('get', url) xhr.send(null) }) return p } let url1 = 'http://localhost:3000/data' let url2 = 'http://localhost:3000/data1' let url3 = 'http://localhost:3000/data2' let p1 = queryData(url1) let p2 = queryData(url2) let p3 = queryData(url3) Promise.all([p1, p2, p3]) .then(ret => { console.log(ret); }) Promise.race([p1, p2, p3]) .then(ret => { console.log(ret); }) </script> </body> </html>
-
结果:
// all ["Hello World!", "Hello data1", "Hello data2"] // race Hello World!
后记 :
本项目为参考某马视频全栈开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA