前后端交互模式
- 接口调用方式
- 原生 ajax
- 基于 jquery 的 ajax DOM操作
- fetch --->
ajax+axios---> 三方库 VUE 官网推荐
- 客户端 与 服务器端 通信方式
- 服务器：后端代码
- 客户端：前段代码 返回数据内容为：html 或 json数据格式
- url地址格式：
- 传统url: 协议://域名:端口/路径?查询参数#锚点(哈希)
schema://host:port/path?uname-lisi&page=12#fragment
- 哈希:表示定位页面中的某些位置
- Restful：
- 与提交方式密切相关;GET/DELETE/PUT/POST
- 传参方式：可以在url中直接传递
-
Promise用法
- ES6 中的新语法，专门用于处理 异步编程
- 异步编程：
- 定时任务
- Ajax
- 事件函数
- 多次异步调用，有依赖关系
- 多次异步调用的结果顺序不确定
- 异步调用结果如果存在依赖关系需要嵌套
- Promise 是解决异步编程的一种方案。从语法上来说，其实就是一个对象，从它可以获取异步操作的消息
- 好处：
- 可以避免多层异步调用嵌套问题(回调地狱)
Promise对象提供了简洁的API，使得控制异步操作更加容易
- Promise 的基本用法
- 实例化对象 ，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果<script> var p = new Promise((resolve, reject)=>{ // 成功时调用 resolve // 失败时调用 reject }); p.then((ret)=>{ // 从resolve 得到正确结果 }),(ret)={ // 从reject 得到错误信息 } </script>案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='./js/vue.js'></script> </head> <body> <script> /* Promise 的基本使用 */ /* console.log(typeof Promise) console.dir(Promise) */ var p = new Promise((reslove, reject)=>{ // 这里用于实现异步任务 // 成功时调用 resolve setTimeout(()=>{ // var flag=true; var flag=false; if(flag){ // 正常情况 reslove('hello'); }else{ // 失败时调用 reject reject('出错了') } }, 100) }) p.then((data)=>{ // 从resolve 得到的正确结果 console.log(data); }, (info)=>{ // 从reject 得到的错误信息 console.log(info) }) </script> </body> </html>
- 基于
Promise处理Ajax请求<body> <script type="text/javascript"> /* 基于 Promise 发送 ajax 请求 */ function queryData(url){ var p = new Promise((reslove, reject)=>{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 回调函数 if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200){ // 处理正常的情况 reslove(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(info){ console.log(info); }); </script> </body>
- 发送 多次 ajax请求
<body> <script type="text/javascript"> /* 基于 Promise 发送 ajax 请求 */ function queryData(url){ var p = new Promise((reslove, reject)=>{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 回调函数 if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200){ // 处理正常的情况 reslove(xhr.responseText); }else{ // 处理异常的情况 reject('服务器错误！！！') } }; xhr.open('get', url); xhr.send(null); }); return p; // 实例对象的返回 } // 发送多次的ajax请求,并且保证顺序 queryData('http://localhost:3000/data') .then((data)=>{ console.log(data); return queryData('http://localhost:3000/data1') }) .then((data)=>{ console.log(data); // 获取接口 1 的返回结果 return queryData('http://localhost:3000/data2') }) .then((data)=>{ // 获取接口 2 的返回结果 console.log(data) }) </script> </body>
- **总结: ** Promise 如何发送多次
ajax请求
- 多个任务通过
.then变成线性的关系，保证了执行的顺序return的是一个新的实例对象，下次调用的是上一次返回的实例对象(data)
-
.then参数中的函数返回值
- 返回 Promise 实例对象
- 返回的该实力对象会调用下一个
then上述案例中便是- 返回普通值
- 返回的普通值会直接传递给下一个
then，通过then参数中函数的参数接收该值<body> <script type="text/javascript"> /* 基于 Promise 发送 ajax 请求 */ function queryData(url){ return new Promise((reslove, reject)=>{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 回调函数 if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200){ // 处理正常的情况 reslove(xhr.responseText); }else{ // 处理异常的情况 reject('服务器错误！！！') } }; xhr.open('get', url); xhr.send(null); }); } queryData('http://localhost:3000/data') .then(function(data){ return queryData('http://localhost:3000/data1'); }) .then((data)=>{ return new Promise((reslove,reject)=>{ setTimeout(()=>{ reslove('123'); }, 1000) }) }) .then((data)=>{ return 'hello'；// 返回一个普通值，then会自动返回一个Promise对象，让下一个then进行操作 }) .then((data)=>{ console.log(data) }) </script> </body>
- Promise 常用的 API
- 实例方法：
p.then()：得到异步任务的正常结构p.catch()：获取异常信息p.finally：成功与否都会执行(尚且不是正确标准)- 用法：
<script> queryData() .then((data)=>{ // 得到异步任务的正常结构 console.log(data); }) .catch((data)=>{ // 获取异常信息 console.log(data); }) .finally((data)=>{ // 成功与否都会执行(尚且不是正确标准) console.log('finally'); }) </script> - **案例：** ```html <script type="text/javascript"> /* Promise 常用的 API - ` p.then() `：得到异步任务的正常结构 - ` p.catch() `：获取异常信息 - ` p.finally `：成功与否都会执行(尚且不是正确标准) */ // console.dir(Promise) function foo(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ // resolve(123); reject('error'); },100) }); } foo() .then((data)=>{ // 得到异步任务的正常结构 console.log(data); }) .catch((data)=>{ // 获取异常信息 console.log(data); }) .finally((data)=>{ // 成功与否都会执行(尚且不是正确标准) console.log('finally'); }) // 两种效果一致 foo() .then((data)=>{ // 得到异步任务的正常结构 console.log(data); },(data)=>{ console.log(data); }) .finally((data)=>{ // 成功与否都会执行(尚且不是正确标准) console.log('finally'); }) </script>
- Promise 常用 API2
- 对象方法：
Promise.all()：并发处理多个异步任务，所有任务都执行完成才能得到的结果Promise.race()：兵法处理多个异步任务，只要有一个任务完成就能得到结果- 用法：
<script> Promise.all([a1, a2, a3]).then((result)=>{ console.log(result); }) Promise.race([p1, p2, p3]).then((result)=>{ console.log(result); }) </script>
- 案例:
<body> <script type="text/javascript"> /* Promise 常用API 对象方法 */ // console.dir(Promise); function queryData(url){ return new Promise((reslove, reject)=>{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 回调函数 if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200){ // 处理正常的情况 reslove(xhr.responseText); }else{ // 处理异常的情况 reject('服务器错误！！！') } }; xhr.open('get', url); xhr.send(null); }); } var p1 = queryData('http://localhost:3000/a1') var p2 = queryData('http://localhost:3000/a2') var p3 = queryData('http://localhost:3000/a3') // Promise 对象方法的使用 Promise.all([p1, p2, p3]).then((result)=>{ console.log(result); // 返回的数组 }) // Promise.race([p1, p2, p3]).then((result)=>{ // console.log(result); // 返回最快响应的对象 // }) </script> </body>
