Promise

 

学习什么是前后端交互模式

学习Promise的相关概念

使用fetch进行接口调用

使用async/await方式调用接口

基于后台接口实现案例

 

 

1.接口调用方式

原生ajax

基于JQuery的ajax

fetch

axios

 

 

 

 

1. 2 URL地址格式

格式： http://host:port/path?query#fragment

http:协议,例如https,ftp等

host:域名或者IP地址

port：端口，HTTP默认端口80，可以省略

path:路径，例如abc/a/b/c/

query:查询参数，例如uname=list&age=12

fragment:瞄点(哈希Hash),用于定位页面的某个位置

 

 

Restful形式的URL

HTTP 请求方式

GET 查询

POST 添加

PUT 修改

DELETE 删除

 

 

Promise  异步调用

• 异步效果分析

1. 定时任务
2. Ajax
3. 事件函数

 

• 多次异步调用的依赖分析

1. 多次异步调用的结果顺序不确定
2. 异步调用结果如果存在依赖需要嵌套

 

 

 这种就是回调地狱

 

 

 

2. Promise概述

Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

使用Promise主要有以下好处：

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise对象提供了简洁的API，使得控制异步操作更加容易

 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

 

 

3. Promise的基本用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

resole和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

 

 

 

 

 

 

4. 基于Promise处理Ajax请求

处理原生Ajax

 

 

 

 发送多个ajax请求

 

 

 

 

 

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

返回promise实例对象

返回的该实例对象会调用下一个then

 

 

 

返回普通值

返回的普通值会直接传递给下一个then,通过then参数中函数的参数接受该值

 

 

 

 

 

6. Promise常用的API-实例方法

实例方法

then()得到异步任务的正确结果

catch()获取异常信息

finally()成功与否都会执行（尚且不是正式标准）

 

 

 

 

 

 

7. Promise常用的API

对象方法

Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果

Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果