Promise 的用法

前后端交互模式

1. 接口调用方式

• 原生 ajax
• 基于 jquery 的 ajax DOM操作
• fetch ---> ajax+
• axios ---> 三方库 VUE 官网推荐

2. 客户端 与 服务器端 通信方式

• 服务器：后端代码
• 客户端：前段代码 返回数据内容为：html 或 json数据格式
• url地址格式：
  • 传统url: 协议://域名:端口/路径?查询参数#锚点(哈希) schema://host:port/path?uname-lisi&page=12#fragment
    • 哈希:表示定位页面中的某些位置
  • Restful：
    • 与提交方式密切相关;GET/DELETE/PUT/POST
    • 传参方式：可以在url中直接传递

3. Promise 用法

• ES6 中的新语法，专门用于处理 异步编程
• 异步编程：
  • 定时任务
  • Ajax
  • 事件函数
• 多次异步调用，有依赖关系
  • 多次异步调用的结果顺序不确定
  • 异步调用结果如果存在依赖关系需要嵌套
• Promise 是解决异步编程的一种方案。从语法上来说，其实就是一个对象，从它可以获取异步操作的消息
• 好处：
  • 可以避免多层异步调用嵌套问题(回调地狱)
  • Promise 对象提供了简洁的API，使得控制异步操作更加容易

4. Promise 的基本用法

• 实例化对象 ，构造函数中传递函数，该函数中用于处理异步任务
• resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过 p.then 获取处理结果

案例：

• 基于 Promise 处理 Ajax 请求

• 发送 多次 ajax请求

• **总结: ** Promise 如何发送多次 ajax 请求
  • 多个任务通过 .then 变成线性的关系，保证了执行的顺序
  • return 的是一个新的实例对象，下次调用的是上一次返回的实例对象(data)

5. .then 参数中的函数返回值

• 返回 Promise 实例对象
  • 返回的该实力对象会调用下一个 then 上述案例中便是
• 返回普通值
  • 返回的普通值会直接传递给下一个then，通过 then 参数中函数的参数接收该值

6. Promise 常用的 API

• 实例方法：
  • p.then()：得到异步任务的正常结构
  • p.catch()：获取异常信息
  • p.finally：成功与否都会执行(尚且不是正确标准)
• 用法：

- **案例：**
```html

7. Promise 常用 API2

• 对象方法：
  • Promise.all()：并发处理多个异步任务，所有任务都执行完成才能得到的结果
  • Promise.race()：兵法处理多个异步任务，只要有一个任务完成就能得到结果
• 用法：

• 案例: