add: 宏任务和微任务
This commit is contained in:
qianguyihao
941
06-JavaScript异步编程：Ajax和Promise/00-服务器分类及PHP入门.md
Normal file
941
06-JavaScript异步编程：Ajax和Promise/00-服务器分类及PHP入门.md
Normal file
@@ -0,0 +1,941 @@
|
||||
|
||||
## C/S架构和B/S架构
|
||||
|
||||
### C/S架构
|
||||
|
||||
是Client/Server这两个单词的首字母，指的是客户端，服务器。
|
||||
|
||||
优点:
|
||||
|
||||
- 性能较高：可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可。
|
||||
|
||||
- 界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果。
|
||||
|
||||
缺点:
|
||||
|
||||
- 更新软件：如果有新的功能，就要推出新的版本。
|
||||
|
||||
- 不同设备访问：如果使用其他的电脑，没有安装客户端的话就无法登陆软件。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### B/S架构
|
||||
|
||||
是Browser/Server的这两个单词的首字母。指的是浏览器、服务器，是WEB兴起之后的一种架构。
|
||||
|
||||
现在所有的网站都是B/S架构，较为常见的例子有百度、知乎、网易云音乐Web等等，只需要通过浏览器即可使用.
|
||||
|
||||
优点：
|
||||
|
||||
- 更新简洁：如果需要更新内容了,对开发人员而言需要更改服务器的内容，对用户而言只需要刷新浏览器即可。
|
||||
|
||||
- 多设备同步：所有数据都在网上,只要能够使用浏览器即可登录使用。
|
||||
|
||||
缺点:
|
||||
|
||||
- 性能较低：相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。
|
||||
|
||||
- 浏览器兼容：处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一。移动设备兼容性较好，ie6已经越来越少人用了。
|
||||
|
||||
|
||||
## 服务器分类
|
||||
|
||||
项目开发时，有三套环境：
|
||||
|
||||
- Development 开发环境
|
||||
|
||||
- Test 测试环境
|
||||
|
||||
- Production 生产环境
|
||||
|
||||
程序员平时干活儿用开发环境；开发完成后，部署到测试环境；测试完成后，产品上线，部署到生产环境。
|
||||
|
||||
三套环境意味着三个服务器。
|
||||
|
||||
### 服务器类型
|
||||
|
||||
|
||||
|
||||
按类型分：
|
||||
|
||||
- 文件服务器
|
||||
|
||||
- 数据库服务器
|
||||
|
||||
- 邮件服务器
|
||||
|
||||
- Web 服务器等
|
||||
|
||||
|
||||
按软件分：
|
||||
|
||||
- Apache 服务器
|
||||
|
||||
- Nginx 服务器
|
||||
|
||||
- IIS 服务器
|
||||
|
||||
- Tomcat 服务器
|
||||
|
||||
- Node 服务器等
|
||||
|
||||
|
||||
按操作系统分：
|
||||
|
||||
- Linux服务器
|
||||
|
||||
- Windows服务器等
|
||||
|
||||
|
||||
### 服务器软件
|
||||
|
||||
提供了某种服务的计算器，我们称之为服务器。那么这些赋予计算器各种服务功能的软件主要有哪一些呢？
|
||||
|
||||
常见的服务器软件有：
|
||||
|
||||
- 文件服务器：Server-U、FileZilla、VsFTP等；
|
||||
|
||||
- 数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；
|
||||
|
||||
- 邮件服务器：Postfix、Sendmail等；
|
||||
|
||||
- HTTP 服务器：Apache（免费、开源）、Nginx、IIS（微软的.net服务器）、Tomcat（java编程的服务器）、NodeJS 等。
|
||||
|
||||
|
||||
## 使用 WampServer 搭建 HTTP服务
|
||||
|
||||
### 集成环境的分类
|
||||
|
||||
- AMP：Apache + Mysql + PHP。
|
||||
|
||||
- WAMP：windows + Apache + Mysql + PHP。
|
||||
|
||||
- XAMPP：WAMP 是针对windows的，而 XAMPP 可以安装在Linux、Windows、MacOS、Solaris这些操作系统上面。
|
||||
|
||||
在windows平台下，如果想要一步到位安装好这些软件，可是使用软件 **WampServer**。
|
||||
|
||||
### WampServer 的安装
|
||||
|
||||
去 WampServer 的[官网](http://www.wampserver.com/en/)下载软件。
|
||||
|
||||
|
||||
|
||||
|
||||
安装完成后进行安装。
|
||||
|
||||
### 测试访问
|
||||
|
||||
打开浏览器输入 `127.0.0.1` 查看显示的内容，如果是第一次安装，默认显示的应该是如下图片：
|
||||
|
||||
|
||||
|
||||
|
||||
127.0.0.1 是回送地址，指本地机，一般用来测试使用，如果想要让其他电脑也能够访问，需要进行如下配置：
|
||||
|
||||
（1）关闭防火墙：
|
||||
|
||||
|
||||
|
||||
|
||||
（2）修改httpd.conf文件：
|
||||
|
||||
因为 Apache 的配置默认不允许外部访问，我们需要修改配置。
|
||||
|
||||
打开文件`c:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf`，通过搜索功能找到`onlineoffline tag - don't remove`这句话，在第234行的 `Allow from 127.0.0.1`的下面，加一行：`Allow from all`。
|
||||
|
||||
然后将第192行的`Deny from all`改为`Allow from all`。
|
||||
|
||||
|
||||
保存，然后重启 wamp 即可。
|
||||
|
||||
|
||||
### 配置网站根目录
|
||||
|
||||
网站的根目录默认是在`D:\wamp\www`。如果想修改这个根目录，可以这样改：
|
||||
|
||||
打开 Apache的配置文件 `D:\wamp\bin\apache\Apache2.2.21\conf\http.conf`，如果是初次安装，找到178行的`DocumentRoot "d:/wamp/www/"`，以及205行的`<Directory "d:/wamp/www/">`，改这两个位置的路径即可。我们可以通过搜索关键字`documentRoot`来定位。
|
||||
|
||||
|
||||
|
||||
## 静态网站和动态网站
|
||||
|
||||
静态网站：
|
||||
|
||||
- 访问的是实实在在保存在服务器上的文件。静态资源包括：html页面、css文件、js文件、图片等。
|
||||
|
||||
- 当内容、图片、界面需要更新时，直接修改.html文件。
|
||||
|
||||
动态网站：
|
||||
|
||||
- 当用户访问网站时，根据`某些逻辑`,动态生成对应的`HTML、CSS、JS`代码给用户（这也就是web服务器开发的本质）。
|
||||
|
||||
- 通过某种手段，当有新的消息时，**自动**的完成网站的更新。
|
||||
|
||||
总结：
|
||||
|
||||
由于静态网站在维护的局限性，所以产生了动态网站。
|
||||
|
||||
实现动态网站的技术：php/jsp/.net/python等。
|
||||
|
||||
动态网站的原理：浏览器请求动态网站的页面（比如*.php），php拼接数据并动态生成html页面，然后将新生成的页面返回给浏览器
|
||||
|
||||
php 之所以被称为最好的语言，是因为：基本上，我们能够想到的功能，它都帮助我们封装成了方法。十分方便。
|
||||
|
||||
|
||||
## PHP的常见语法
|
||||
|
||||
**PHP代码执行方式**：
|
||||
|
||||
- 在服务器端执行，然后返回给用户结果。如果直接使用浏览器打开，就会解析为文本。
|
||||
|
||||
- 意思是说，需要浏览器通过 http请求，才能够执行php页面。
|
||||
|
||||
这里只列举常用的PHP语法，更为详细的语法教程可以查阅 [api 文档](http://www.w3school.com.cn/php/index.asp)。
|
||||
|
||||
### 第一段 php 代码
|
||||
|
||||
将 WampServer 跑起来，在D:\wamp\www下新建一个`1.php`文件，代码如下：
|
||||
|
||||
1.php：
|
||||
|
||||
```
|
||||
<?php
|
||||
echo "hello smyhvae";
|
||||
?>
|
||||
```
|
||||
|
||||
|
||||
在浏览器中输入`http://127.0.0.1/2018-02-28/1.php`，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
**代码的编写位置**：
|
||||
|
||||
上方代码中，注意php语言的格式，第一行和第三行的格式中，没有空格。代码的编写位置在`<?php 代码写在这里?>`。
|
||||
|
||||
### 注释
|
||||
|
||||
php 注释的写法跟 js 一致。
|
||||
|
||||
```
|
||||
<?php
|
||||
//这是单行注释
|
||||
/*
|
||||
这是多行注释
|
||||
*/
|
||||
?>
|
||||
```
|
||||
|
||||
|
||||
### 变量
|
||||
|
||||
- 变量以`$`符号开头，其后是变量的名称。大小写敏感。
|
||||
|
||||
- 变量名称必须以字母或下划线开头。
|
||||
|
||||
举例：
|
||||
|
||||
```
|
||||
$a1;
|
||||
$_abc;
|
||||
```
|
||||
|
||||
### 数据类型
|
||||
|
||||
PHP支持的数据类型包括：
|
||||
|
||||
- 字符串
|
||||
|
||||
- 整数
|
||||
|
||||
- 浮点数
|
||||
|
||||
- 布尔
|
||||
|
||||
- 数组
|
||||
|
||||
- 对象
|
||||
|
||||
- NULLL
|
||||
|
||||
|
||||
定义字符串时需要注意：
|
||||
|
||||
- 单引号`` ：内部的内容只是作为字符串。
|
||||
|
||||
- 双引号"" ：如果内部是PHP的变量,那么会将该变量的值解析。如果内部是html代码，也会解析成html。
|
||||
|
||||
|
||||
说白了，单引号里的内容，一定是字符串。双引号里的内容，可能会进行解析。
|
||||
|
||||
```
|
||||
echo "<input type=`button` value=`smyhvae`>";
|
||||
```
|
||||
|
||||
上面这个语句，就被会解析成按钮。
|
||||
|
||||
|
||||
```
|
||||
// 字符串
|
||||
$str = '123';
|
||||
|
||||
// 字符串拼接
|
||||
$str2 = '123'.'哈哈哈';
|
||||
|
||||
|
||||
// 整数
|
||||
$numA = 1; //正数
|
||||
$numB = -2;//负数
|
||||
|
||||
// 浮点数
|
||||
$x = 1.1;
|
||||
|
||||
// 布尔
|
||||
$a = true;
|
||||
$b = false;
|
||||
|
||||
// 普通数组：数组中可以放 数字、字符串、布尔值等，不限制类型。
|
||||
$arr1 = array('123', 123);
|
||||
echo $arr1[0];
|
||||
|
||||
// 关系型数组：类似于json格式
|
||||
$arr2 = $array(`name`=>`smyhvae`, `age`=>`26`);
|
||||
echo $arr2[`name`]; //获取时，通过 key 来获取
|
||||
|
||||
```
|
||||
|
||||
上方代码中注意，php 中字符串拼接的方式是 `.`。要注意哦。
|
||||
|
||||
|
||||
### 运算符
|
||||
|
||||
PHP 中的运算符跟 JavaScript 中的基本一致，用法也基本一致。
|
||||
|
||||
- 算数运算符：`+`、`-`、`/`、`*`、`%`
|
||||
|
||||
- 赋值运算符：`x = y`、`x += y`,`x -= y`等。
|
||||
|
||||
举例：
|
||||
|
||||
```php
|
||||
<?php
|
||||
$x = 10;
|
||||
$y = 6;
|
||||
|
||||
echo ($x + $y); // 输出 16
|
||||
echo ($x - $y); // 输出 4
|
||||
echo ($x * $y); // 输出 60
|
||||
echo ($x / $y); // 输出 1.6666666666667
|
||||
echo ($x % $y); // 输出 4
|
||||
?>
|
||||
```
|
||||
|
||||
### 函数的定义
|
||||
|
||||
语法格式：
|
||||
|
||||
```php
|
||||
|
||||
function functionName() {
|
||||
//这里写代码
|
||||
}
|
||||
```
|
||||
|
||||
（1）有参数、无返回值的函数：
|
||||
|
||||
```php
|
||||
function sayName($name){
|
||||
echo $name.'你好哦';
|
||||
}
|
||||
// 调用
|
||||
sayName('smyhvae');
|
||||
```
|
||||
|
||||
（2）有参数、参数有默认值的函数：
|
||||
|
||||
```php
|
||||
function sayFood($food='西兰花'){
|
||||
echo $food.'好吃';
|
||||
}
|
||||
// 调用
|
||||
sayFood('西葫芦');// 如果传入参数,就使用传入的参数
|
||||
sayFood();// 如果不传入参数,直接使用默认值
|
||||
```
|
||||
|
||||
（3）有参数、有返回值的函数：
|
||||
|
||||
```php
|
||||
function sum($a,$b){
|
||||
return $a+$b
|
||||
}
|
||||
sum(1,2);// 返回值为1+2 = 3
|
||||
```
|
||||
|
||||
### 类和对象
|
||||
|
||||
PHP中允许使用对象这种**自定义**的数据类型。必须先声明，实例化之后才能够使用。
|
||||
|
||||
定义最基础的类：
|
||||
|
||||
```php
|
||||
class Fox{
|
||||
|
||||
public $name = 'itcast';
|
||||
public $age = 10;
|
||||
}
|
||||
|
||||
$fox = new $fox;
|
||||
// 对象属性取值
|
||||
$name = $fox->name;
|
||||
// 对象属性赋值
|
||||
$fox->name = '小狐狸';
|
||||
```
|
||||
|
||||
|
||||
带构造函数的类：
|
||||
|
||||
```php
|
||||
class fox{
|
||||
// 私有属性,外部无法访问
|
||||
var $name = '小狐狸';
|
||||
// 定义方法 用来获取属性
|
||||
function Name(){
|
||||
return $this->name;
|
||||
}
|
||||
// 构造函数,可以传入参数
|
||||
function fox($name){
|
||||
$this->name = $name
|
||||
}
|
||||
}
|
||||
|
||||
// 定义了构造函数 需要使用构造函数初始化对象
|
||||
$fox = new fox('小狐狸');
|
||||
// 调用对象方法,获取对象名
|
||||
$foxName = $fox->Name();
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 内容输出
|
||||
|
||||
- `echo`：输出字符串。
|
||||
|
||||
- `print_r()`：输出复杂数据类型。比如数组、对象。
|
||||
|
||||
- `var_dump()`：输出详细信息。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```php
|
||||
$arr =array(1,2,'123');
|
||||
|
||||
echo'123';
|
||||
//结果：123
|
||||
|
||||
|
||||
print_r($arr);
|
||||
//结果：Array ( [0] => 1 [1] => 2 [2] => 123 )
|
||||
|
||||
var_dump($arr);
|
||||
/* 结果：
|
||||
array
|
||||
0 => int 1
|
||||
1 => int 2
|
||||
2 => string '123' (length=3)
|
||||
*/
|
||||
|
||||
```
|
||||
|
||||
### 循环语句
|
||||
|
||||
这里只列举了`foreach`、`for`循环。
|
||||
|
||||
for 循环：
|
||||
|
||||
```php
|
||||
for ($x=0; $x<=10; $x++) {
|
||||
echo "数字是：$x <br>";
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
foreach 循环：
|
||||
|
||||
```php
|
||||
$colors = array("red","green","blue","yellow");
|
||||
|
||||
foreach ($colors as $value) {
|
||||
echo "$value <br>";
|
||||
}
|
||||
```
|
||||
|
||||
上方代码中，参数一：循环的对象。参数二：将对象的值挨个取出，直到最后。
|
||||
|
||||
如果循环的是对象，输出的是对象的属性的值。
|
||||
|
||||
输出结果：
|
||||
|
||||
|
||||
```bash
|
||||
red
|
||||
green
|
||||
blue
|
||||
yellow
|
||||
```
|
||||
|
||||
|
||||
## php中的header()函数
|
||||
|
||||
浏览器访问http服务器，接收到响应时，会根据响应**报文头**的内容进行一些具体的操作。在php中，我们可以根据 **header** 来设置这些内容。
|
||||
|
||||
|
||||
**header()函数的作用**：用来向客户端(浏览器)发送报头。直接写在php代码的第一行就行。
|
||||
|
||||
下面列举几个常见的 header函数。
|
||||
|
||||
（1）设置编码格式：
|
||||
|
||||
```php
|
||||
header('content-type:text/html; charset= utf-8');
|
||||
```
|
||||
|
||||
例如：
|
||||
|
||||
```php
|
||||
<?php
|
||||
header('content-type:text/html; charset= utf-8');
|
||||
echo "我的第一段 PHP 脚本";
|
||||
?>
|
||||
```
|
||||
|
||||
（2）设置页面跳转：
|
||||
|
||||
```php
|
||||
header('location:http://www.baidu.com');
|
||||
```
|
||||
|
||||
|
||||
设置页面刷新的间隔：
|
||||
|
||||
|
||||
```php
|
||||
header('refresh:3; url=http://www.xiaomi.com');
|
||||
```
|
||||
|
||||
|
||||
## php中的 get 请求和 post 请求
|
||||
|
||||
### get 请求
|
||||
|
||||
可以通过`$_GET`对象来获取。
|
||||
|
||||
**举例**：下面是一个简单的表单代码，通过 get 请求将数据提交到01.php。
|
||||
|
||||
|
||||
（1）index.html:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 通过 get 请求，将表单提交到 php 页面中 -->
|
||||
<form action="01.php" method="get">
|
||||
<label for="">姓名：
|
||||
<input type="text" name="userName"></label>
|
||||
<br/>
|
||||
<label for="">邮箱：
|
||||
<input type="text" name="userEmail"></label>
|
||||
<br/>
|
||||
<input type="submit" name="">
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
（2）01.php：
|
||||
|
||||
|
||||
```php
|
||||
<?php
|
||||
header('content-type:text/html; charset= utf-8');
|
||||
echo "<h1>php 的get 请求演示</h1>";
|
||||
echo '用户名：'.$_GET['userName'];
|
||||
echo '<br/>';
|
||||
echo '邮箱：'.$_GET['userEmail'];
|
||||
?>
|
||||
```
|
||||
|
||||
上方代码可以看出，`$_GET`是关系型数组，可以通过 **$_GET[`key`]**获取值。这里的 key 是 form 标签中表单元素的 name 属性的值。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### post 请求
|
||||
|
||||
可以通过`$_POST`对象来获取。
|
||||
|
||||
**举例**：下面是一个简单的表单代码，通过 post 请求将数据提交到02.php。
|
||||
|
||||
（1）index.html：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 通过 post 请求，将表单提交到 php 页面中 -->
|
||||
<form action="02.php" method="post" >
|
||||
<label for="">姓名：
|
||||
<input type="text" name= "userName"></label>
|
||||
<br/>
|
||||
<label for="">邮箱：
|
||||
<input type="text" name= "userEmail"></label>
|
||||
<br/>
|
||||
<input type="submit" name="">
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
（2）02.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
header('content-type:text/html; charset= utf-8');
|
||||
echo "<h1>php 的 post 请求演示</h1>";
|
||||
echo '用户名：'.$_POST['userName'];
|
||||
echo '<br/>';
|
||||
echo '邮箱：'.$_POST['userEmail'];
|
||||
?>
|
||||
```
|
||||
|
||||
上方代码可以看出，`$_POST`是关系型数组，可以通过 **$_POST[`key`]**获取值。这里的 key 是 form 标签中表单元素的 name 属性的值。
|
||||
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
实际开发中，可能不会单独写一个php文件，常见的做法是：在 html 文件中嵌入 php 的代码。
|
||||
|
||||
比如说，原本 html 中有个 li 标签是存放用户名的：
|
||||
|
||||
```html
|
||||
<li>smyhvae</li>
|
||||
```
|
||||
|
||||
嵌入 php后，用户名就变成了动态获取的：
|
||||
|
||||
```php
|
||||
<li><?php
|
||||
echo $_POST[`userName`]
|
||||
?></li>
|
||||
```
|
||||
|
||||
## php 中文件相关的操作
|
||||
|
||||
### 文件上传 `$_FILES`
|
||||
|
||||
上传文件时，需要在html代码中进行如下设置：
|
||||
|
||||
（1）在html表单中，设置`enctype="multipart/form-data"`。该值是必须的。
|
||||
|
||||
（2）只能用 post 方式获取。
|
||||
|
||||
代码如下：
|
||||
|
||||
（1）index.html:
|
||||
|
||||
```html
|
||||
<form action="03-fileUpdate.php" method="post" enctype="multipart/form-data">
|
||||
<label for="">照片:
|
||||
<input type="file" name = "picture" multiple=""></label>
|
||||
<br/>
|
||||
<input type="submit" name="">
|
||||
</form>
|
||||
|
||||
```
|
||||
|
||||
（2）在 php 文件中打印 file 的具体内容：
|
||||
|
||||
```php
|
||||
<?php
|
||||
sleep(5);// 让服务器休息一会
|
||||
print_r($_FILES); //打印 file 的具体内容
|
||||
?>
|
||||
```
|
||||
|
||||
演示效果：
|
||||
|
||||
|
||||
|
||||
上方现象可以看出：
|
||||
|
||||
- 点击提交后，服务器没有立即出现反应,而是休息了一会`sleep(5)`。
|
||||
|
||||
- 在`wamp/tmp`目录下面出现了一个`.tmp`文件。
|
||||
|
||||
- .tmp文件一会就被自动删除了。
|
||||
|
||||
- 服务器返回的内容中有文件的名字`[name] => computer.png`，以及上传文件保存的位置`D:\wamp\tmp\php3D70.tmp`。服务器返回的内容如下：
|
||||
|
||||
```bash
|
||||
Array ( [upFile] => Array ( [name] => yangyang.jpg [type] => image/jpeg [tmp_name] => D:\wamp\tmp\phpCC56.tmp [error] => 0 [size] => 18145 ) )
|
||||
```
|
||||
|
||||
### 文件保存
|
||||
|
||||
我们尝试一下，把上面的例子中的`临时目录`下面的文件保存起来。这里需要用到 php 里的 `move_uploaded_file()`函数。[#](http://www.w3school.com.cn/php/func_filesystem_move_uploaded_file.asp)
|
||||
|
||||
格式如下：
|
||||
|
||||
```php
|
||||
move_uploaded_file($_FILES['photo']['tmp_name'], './images/test.jpg');
|
||||
```
|
||||
|
||||
参数解释：参数一：移动的文件。参数二：目标路径。
|
||||
|
||||
（1）index.html：（这部分的代码保持不变）
|
||||
|
||||
```php
|
||||
<form action="03.fileUpdate.php" method="post" enctype="multipart/form-data">
|
||||
<label for="">照片:
|
||||
<input type="file" name = "picture" multiple=""></label>
|
||||
<br/>
|
||||
<input type="submit" name="">
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
（2）PHP代码：
|
||||
|
||||
暂略。
|
||||
|
||||
|
||||
### WampServer 中修改上传文件的大小
|
||||
|
||||
（1）打开 WampServer的文件`php.ini`：
|
||||
|
||||
|
||||
|
||||
|
||||
（2）修改`php.ini`中的如下内容：
|
||||
|
||||
设置文件最大上传限制：（值的大小可以根据需求修改）
|
||||
|
||||
```php
|
||||
file_uploads = On; 是否允许上传文件 On/Off 默认是On
|
||||
upload_max_filesize = 32M; 设置 上传文件的最大限制
|
||||
post_max_size = 32M; 设置 通过Post提交的最多数据
|
||||
```
|
||||
|
||||
|
||||
考虑网络传输快慢：这里修改一些参数：
|
||||
|
||||
|
||||
```php
|
||||
max_execution_time = 30000 ; 脚本最长的执行时间 单位为秒
|
||||
max_input_time = 600 ; 接收提交的数据的时间限制 单位为秒
|
||||
memory_limit = 1024M ; 最大的内存消耗
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## HTTP 协议
|
||||
|
||||
### 请求
|
||||
|
||||
客户端发出的请求，主要由三个组成部分：请求行、请求头、请求主体。如下图所示：
|
||||
|
||||
20180228_1505.jpg
|
||||
|
||||
**1、请求行：**
|
||||
|
||||
- 请求方法：GET or POST
|
||||
|
||||
- 请求URL
|
||||
|
||||
- HTTP协议版本
|
||||
|
||||
|
||||
**2、请求头：**
|
||||
|
||||
常见的请求头如下：
|
||||
|
||||
```bash
|
||||
User-Agent：浏览器的具体类型 如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
|
||||
|
||||
Accept：浏览器支持哪些数据类型 如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;
|
||||
|
||||
Accept-Charset：浏览器采用的是哪种编码 如：Accept-Charset: ISO-8859-1
|
||||
|
||||
Accept-Encoding：浏览器支持解码的数据压缩格式 如：Accept-Encoding: gzip, deflate
|
||||
|
||||
Accept-Language：浏览器的语言环境 如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
|
||||
|
||||
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com
|
||||
|
||||
Connection：表示是否需要持久连接。
|
||||
属性值可以是Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。
|
||||
要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive
|
||||
|
||||
Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
|
||||
|
||||
Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset='gb2312'
|
||||
|
||||
Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip
|
||||
|
||||
Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。
|
||||
|
||||
Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。
|
||||
|
||||
Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
|
||||
|
||||
```
|
||||
|
||||
**3、请求体：**
|
||||
|
||||
指的是提交给服务器的数据。
|
||||
|
||||
需要注意的是，如果是往服务器提交数据，需要在请求头中设置`Content-Type: application/x-www-form-urlencoded`(在ajax中需要手动设置)。
|
||||
|
||||
### 响应
|
||||
|
||||
响应报文是服务器返回给客户端的。组成部分有响应行、响应头、响应主体。
|
||||
|
||||
|
||||
|
||||
|
||||
**1、状态行：**
|
||||
|
||||
HTTP响应行：主要是设置响应状态等信息。
|
||||
|
||||
|
||||
|
||||
**2、响应头：**
|
||||
|
||||
Cookie、缓存等信息就是在响应头的属性中设置的。
|
||||
|
||||
常见的响应头如下：
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
Cache-Control
|
||||
|
||||
响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
|
||||
|
||||
下面，的设置让客户端对响应内容缓存3600秒，也即在3600秒内，如果客户再次访问该资源，直接从客户端的缓存中返回内容给客户，不要再从服务端获取（当然，这个功能是靠客户端实现的，服务端只是通过这个属性提示客户端“应该这么做”，做不做，还是决定于客户端，如果是自己宣称支持HTTP的客户端，则就应该这样实现）。
|
||||
|
||||
Cache-Control: max-age=3600
|
||||
|
||||
ETag
|
||||
|
||||
一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。
|
||||
|
||||
ETag: "737060cd8c284d8af7ad3082f209582d"
|
||||
|
||||
Location
|
||||
|
||||
我们在Asp.net中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：
|
||||
|
||||
Location: http://www.google.com.hk
|
||||
|
||||
Set-Cookie
|
||||
|
||||
服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的。
|
||||
|
||||
Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
**3、HTTP响应体：**
|
||||
|
||||
如果请求的是HTML页面，那么返回的就是HTML代码。如果是JS就是JS代码。
|
||||
|
||||
### 抓包工具
|
||||
|
||||
常见的抓包工具有：Fiddler、Charles。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```php
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```php
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```php
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```php
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
241
06-JavaScript异步编程：Ajax和Promise/01-单线程和异步.md
Normal file
241
06-JavaScript异步编程：Ajax和Promise/01-单线程和异步.md
Normal file
@@ -0,0 +1,241 @@
|
||||
## 单线程
|
||||
|
||||
JavaScript 语言和执行环境是**单线程**。即同一时间，只能处理一个任务。
|
||||
|
||||
具体来说，所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个。所有的任务都**需要排队**。
|
||||
|
||||
**JS 为何要被设计为单线程呢**？原因如下：
|
||||
|
||||
- 首先是历史原因，在最初设计 JS 这门语言时，多进程、多线程的架构并不流行，硬件支持并不好。
|
||||
|
||||
- 其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。
|
||||
|
||||
- 而且，如果多个线程同时操作同一个 DOM，在多线程不加锁的情况下，会产生冲突，最终会导致 DOM 渲染的结果不符预期。
|
||||
|
||||
所以，为了避免这些复杂问题的出现，JS 被设计成了单线程语言。
|
||||
|
||||
## 同步任务和异步任务
|
||||
|
||||
如果当前正在执行的任务很耗时，它就会**阻塞**其他正在排队的任务。为了解决这个问题，JS 在设计之初，将任务分成了两类：同步任务、异步任务。
|
||||
|
||||
- 同步任务：在**主线程**上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
|
||||
|
||||
- 异步任务：不进入主线程、而是进入**任务队列**（Event Queue）的任务。只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
|
||||
|
||||
代码举例：
|
||||
|
||||
```js
|
||||
console.log('同步任务1');
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('异步任务');
|
||||
}, 1000);
|
||||
|
||||
console.log('同步任务2');
|
||||
```
|
||||
|
||||
打印结果是：
|
||||
|
||||
```
|
||||
同步任务1
|
||||
同步任务2
|
||||
异步任务
|
||||
```
|
||||
|
||||
代码解释：第一行代码是同步任务，会**立即执行**；定时器里的回调函数是异步任务，需要等 1 秒后才会执行。假如定时器里的代码是同步任务，那需要等待1秒后，才能执行最后一行代码`console.log('同步任务2')`，也就是造成了主线程里的同步任务阻塞，这不是我们希望看到的。
|
||||
|
||||
比如说，网络图片的请求，就是一个异步任务。前端如果同时请求多张网络网络图片，谁先请求完成就让谁先显示出来。假如网络图片的请求做成同步任务，那就会出大问题，所有图片都得排队加载，如果第一张图片未加载完成，就得卡在那里，造成阻塞，导致其他图片都加载不出来。页面看上去也会很卡顿，这肯定是不能接受的。
|
||||
|
||||
### 前端使用异步的场景
|
||||
|
||||
什么时候需要**等待**，就什么时候用异步。常见的异步场景如下：
|
||||
|
||||
- 1、定时器：setTimeout（定时炸弹）、setInterval（循环执行）
|
||||
|
||||
- 2、事件绑定（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步）
|
||||
|
||||
- 3、网络请求（含接口请求）：ajax 请求、网络图片加载
|
||||
|
||||
- 4、ES6 中的 Promise
|
||||
|
||||
现在的大部分软件项目，都是前后端分离的。后端生成接口，前端请求接口。前端发送 ajax 请求，向后端请求数据，然后**等待一段时间**后，才能拿到数据。这个请求过程就是异步任务。
|
||||
|
||||
### 接口调用的方式
|
||||
|
||||
js 中常见的接口调用方式，有以下几种：
|
||||
|
||||
- 原生 ajax、基于 jQuery 的 ajax
|
||||
- Promise
|
||||
- Fetch
|
||||
- axios
|
||||
|
||||
下一篇文章，我们重点讲一下接口调用里的 Ajax，然后在 ES6 语法中学习 **Promise**。在这之前，我们需要先了解同步任务、异步任务的事件循环机制。
|
||||
|
||||
|
||||
### 事件循环机制（重要）
|
||||
|
||||
|
||||
|
||||
执行顺序如下：
|
||||
|
||||
- 同步任务：进入主线程后，立即执行。
|
||||
|
||||
- 异步任务：会先进入 Event Table；等时间到了之后，再进入 Event Queue，然后排队（为什么要排队？因为同一时间，JS 只能执行一个任务）。比如说，`setTimeout(()=> {}, 1000)`这种定时器任务，需要等一秒之后再进入 Event Queue。
|
||||
|
||||
- 当主线程的任务执行完毕之后，此时主线程处于空闲状态，于是会去读取 Event Queue 中的任务队列，如果有任务，则进入到主线程去执行。
|
||||
|
||||
|
||||
### 多次异步调用的顺序
|
||||
|
||||
- 多次异步调用的结果，顺序可能不同步。
|
||||
|
||||
- 异步调用的结果如果**存在依赖**，则需要通过回调函数进行嵌套。
|
||||
|
||||
|
||||
## 定时器：代码示例
|
||||
|
||||
掌握了上面的事件循环原理之后，我们来看几个例子。
|
||||
|
||||
### 举例 1
|
||||
|
||||
```js
|
||||
console.log(1);
|
||||
|
||||
setTimeout(() => {
|
||||
console.log(2);
|
||||
}, 1000);
|
||||
console.log(3);
|
||||
console.log(4);
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
1
|
||||
3
|
||||
4
|
||||
2
|
||||
```
|
||||
|
||||
解释：先等同步任务执行完成后，再执行异步任务。
|
||||
|
||||
### 举例 2（重要）
|
||||
|
||||
如果我把上面的等待时间，从 1 秒改成 0 秒，你看看打印结果会是什么。
|
||||
|
||||
```js
|
||||
console.log(1);
|
||||
|
||||
setTimeout(() => {
|
||||
console.log(2);
|
||||
}, 0);
|
||||
console.log(3);
|
||||
console.log(4);
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
1
|
||||
3
|
||||
4
|
||||
2
|
||||
```
|
||||
|
||||
可以看到，打印结果没有任何变化，这个题目在面试中经常出现，考的就是 `setTimeout(()=> {}, 0)`会在什么时候执行。这就需要我们了解同步任务、异步任务的执行顺序，即前面讲到的**事件循环机制**。
|
||||
|
||||
解释：先等同步任务执行完成后，再执行异步任务。
|
||||
|
||||
同理，我们再来看看下面这段伪代码：
|
||||
|
||||
```js
|
||||
setTimeout(() => {
|
||||
console.log('异步任务');
|
||||
}, 2000);
|
||||
|
||||
// 伪代码
|
||||
sleep(5000); //表示很耗时的同步任务
|
||||
```
|
||||
|
||||
上面的代码中，异步任务不是 2 秒之后执行，而是等耗时的同步任务执行完毕之后，才执行。那这个异步任务，是在 5 秒后执行？还是在 7 秒后执行？这个作业，留给读者你来思考~
|
||||
|
||||
### 举例 3（较真系列）
|
||||
|
||||
```js
|
||||
setTimeout(() => {
|
||||
console.log('异步任务');
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
上面的代码中，等到 1 秒之后，真的会执行异步任务吗？其实不是。
|
||||
|
||||
在浏览器中， setTimeout()/ setInterval() 的每调用一次定时器的最小时间间隔是**4毫秒**，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的 setInterval 的回调函数阻塞导致的。
|
||||
|
||||
上面的案例中，异步任务需要等待 1004 毫秒之后，才会从 Event Table 进入到 Event Queue。这在面试中也经常被问到。
|
||||
|
||||
## 异步任务举例
|
||||
|
||||
### 例 1：加载图片
|
||||
|
||||
```js
|
||||
// 加载图片的异步任务
|
||||
function loadImage(file, success, fail) {
|
||||
const img = new Image();
|
||||
img.src = file;
|
||||
img.onload = () => {
|
||||
// 图片加载成功
|
||||
success(img);
|
||||
};
|
||||
img.onerror = () => {
|
||||
// 图片加载失败
|
||||
fail(new Error('img load fail'));
|
||||
};
|
||||
}
|
||||
|
||||
loadImage(
|
||||
'images/qia nguyihao.png',
|
||||
(img) => {
|
||||
console.log('图片加载成功');
|
||||
document.body.appendChild(img);
|
||||
img.style.border = 'solid 2px red';
|
||||
},
|
||||
(error) => {
|
||||
console.log('图片加载失败');
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### 例 2：定时器计时，移动 DOM 元素
|
||||
|
||||
```js
|
||||
// 函数封装：定义一个定时器，每间隔 delay 毫秒之后，执行 callback 函数
|
||||
function myInterval(callback, delay = 100) {
|
||||
let timeId = setInterval(() => callback(timeId), delay);
|
||||
}
|
||||
|
||||
myInterval((timeId) => {
|
||||
// 每间隔 500毫秒之后，向右移动 .box 元素
|
||||
const myBox = document.getElementsByClassName('box')[0];
|
||||
const left = parseInt(window.getComputedStyle(myBox).left);
|
||||
myBox.style.left = left + 20 + 'px';
|
||||
if (left > 300) {
|
||||
clearInterval(timeId);
|
||||
|
||||
// 每间隔 10 毫秒之后，将 .box 元素的宽度逐渐缩小，直到消失
|
||||
myInterval((timeId2) => {
|
||||
const width = parseInt(window.getComputedStyle(myBox).width);
|
||||
myBox.style.width = width - 1 + 'px';
|
||||
if (width <= 0) clearInterval(timeId2);
|
||||
}, 10);
|
||||
}
|
||||
}, 200);
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [JS-同步任务，异步任务，微任务，和宏任务](https://github.com/PleaseStartYourPerformance/javaScript/issues/34)
|
||||
- [JS 同步异步宏任务微任务](https://juejin.cn/post/6875605533127081992)、[JavaScript 中事件循环的理解](https://zhuanlan.zhihu.com/p/364475433)、[javascript 事件循环机制](https://github.com/reng99/blogs/issues/34)
|
||||
- [如何实现比 setTimeout 快 80 倍的定时器？](https://mp.weixin.qq.com/s/NqzWkeOhqAU85XPkJu_wCA)
|
||||
409
06-JavaScript异步编程：Ajax和Promise/02-Ajax入门和发送http请求.md
Normal file
409
06-JavaScript异步编程：Ajax和Promise/02-Ajax入门和发送http请求.md
Normal file
@@ -0,0 +1,409 @@
|
||||
## 同步和异步回顾
|
||||
|
||||
### 同步和异步的简单理解
|
||||
|
||||
- 同步：必须等待前面的任务完成，才能继续后面的任务。
|
||||
|
||||
- 异步：不受当前任务的影响。
|
||||
|
||||
拿排队举例：
|
||||
|
||||
- 同步：在银行排队时，只有等到你了，才能够去处理业务。
|
||||
|
||||
- 异步：在排队的时候，可以玩手机。
|
||||
|
||||
### 异步更新网站
|
||||
|
||||
我们在访问一个普通的网站时，当浏览器加载完`HTML、CSS、JS`以后，网站的内容就固定了。如果想让网站内容发生更改，就必须**刷新**页面才能够看到更新的内容。
|
||||
|
||||
可如果用到**异步更新**，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的**加载更多**，会自动帮我们加载更多的微博，同时页面并不会整体刷新。
|
||||
|
||||
试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要重新刷新，体验就太糟糕了。
|
||||
|
||||
web 前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。
|
||||
|
||||
关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript 基础：异步编程和 Ajax/01-单线程和异步》
|
||||
|
||||
## Ajax
|
||||
|
||||
### Ajax 的概念
|
||||
|
||||
在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。
|
||||
|
||||
Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：**XMLHttpRequest**。
|
||||
|
||||
### Ajax 原理（发送 Ajax 请求的五个步骤）
|
||||
|
||||
> 其实也就是 使用 XMLHttpRequest 对象的五个步骤。
|
||||
|
||||
我们先回忆一下，一个完整的 HTTP 请求需要的是：
|
||||
|
||||
- 请求的网址、请求方法 get/post。
|
||||
|
||||
- 提交请求的内容数据、请求主体等。
|
||||
|
||||
- 接收响应回来的内容。
|
||||
|
||||
发送 Ajax 请求的五个步骤：
|
||||
|
||||
（1）创建异步对象，即 XMLHttpRequest 对象。
|
||||
|
||||
（2）使用 open 方法设置请求参数。`open(method, url, async)`。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。
|
||||
|
||||
（3）发送请求：`send()`。
|
||||
|
||||
（4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。
|
||||
|
||||
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
|
||||
|
||||
（5）服务端响应，获取返回的数据。
|
||||
|
||||
## XMLHttpRequest 对象详解
|
||||
|
||||
我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。
|
||||
|
||||
### 发送请求
|
||||
|
||||
发送请求的方法：
|
||||
|
||||
```javascript
|
||||
open(method, url, async);
|
||||
```
|
||||
|
||||
参数解释：
|
||||
|
||||
- method：请求的类型；GET 或 POST
|
||||
|
||||
- url：文件在服务器上的位置
|
||||
|
||||
- async：true（异步）或 false（同步）
|
||||
|
||||
另外还有个方法：（仅用于 POST 请求）
|
||||
|
||||
```javascript
|
||||
send(string);
|
||||
```
|
||||
|
||||
### POST 请求时注意
|
||||
|
||||
如果想让 像 form 表单提交数据那样使用 POST 请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
|
||||
|
||||
```javascript
|
||||
xmlhttp.open('POST', 'ajax_test.php', true);
|
||||
|
||||
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
|
||||
xmlhttp.send('name=smyhvae&age=27');
|
||||
```
|
||||
|
||||
### onreadystatechange 事件
|
||||
|
||||
注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。
|
||||
|
||||
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
|
||||
|
||||
- 0: 请求未初始化
|
||||
|
||||
- 1: 服务器连接已建立
|
||||
|
||||
- 2: 请求已接收
|
||||
|
||||
- 3: 请求处理中
|
||||
|
||||
- 4: 请求已完成，且响应已就绪
|
||||
|
||||
status：
|
||||
|
||||
- 200: "OK"。
|
||||
|
||||
- 404: 未找到页面。
|
||||
|
||||
在 onreadystatechange 事件中，**当 readyState 等于 4，且状态码为 200 时，表示响应已就绪**。
|
||||
|
||||
### 服务器响应的内容
|
||||
|
||||
- responseText：获得字符串形式的响应数据。
|
||||
|
||||
- responseXML：获得 XML 形式的响应数据。
|
||||
|
||||
如果响应的是普通字符串，就使用 responseText；如果响应的是 XML，使用 responseXML。
|
||||
|
||||
## 手写 Ajax
|
||||
|
||||
### 手写第一个 Ajax 请求
|
||||
|
||||
get 请求：
|
||||
|
||||
```js
|
||||
//【发送ajax请求需要五步】
|
||||
//（1）创建XMLHttpRequest对象
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
|
||||
//（2）设置请求的参数。包括：请求的方法、请求的url。
|
||||
xmlhttp.open('get', '02-ajax.php');
|
||||
|
||||
//（3）发送请求
|
||||
xmlhttp.send();
|
||||
|
||||
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
|
||||
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
// 为了保证 数据 完整返回，我们一般会判断 两个值
|
||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||||
//（5）服务端相应：如果能够进入这个判断，说明数据请求成功了
|
||||
console.log('数据返回成功：' + JSON.stringify(xmlhttp.responseText));
|
||||
|
||||
// 伪代码：按业务需要，将接口返回的内容显示在页面上
|
||||
// document.querySelector('h1').innerHTML = xmlhttp.responseText;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
post 请求：
|
||||
|
||||
```js
|
||||
//（1）异步对象
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
|
||||
//（2）设置请求参数。包括：请求的方法、请求的url。
|
||||
xmlhttp.open('post', '02.post.php');
|
||||
|
||||
// 如果想要使用post提交数据,必须添加此行
|
||||
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
|
||||
//（3）发送请求
|
||||
xmlhttp.send('name=fox&age=18');
|
||||
|
||||
//（4）注册事件
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
//（5）服务端相应
|
||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||||
alert(xmlhttp.responseText);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 封装 Ajax 请求（重要）
|
||||
|
||||
上面的代码，执行顺序很好理解，但在实战开发中，是不会这么写的。假如你的页面中，需要调十次接口，那岂不是要手写十遍 Ajax 请求？这样会导致大量的重复代码。
|
||||
|
||||
所以，我们需要把重复代码封装成一个公共函数，然后通过**回调函数**处理成功和失败的逻辑。
|
||||
|
||||
封装 Ajax 请求的代码如下：(get 请求为例)
|
||||
|
||||
```js
|
||||
// 封装 Ajax为公共函数：传入回调函数 success 和 fail
|
||||
function myAjax(url, success, fail) {
|
||||
// 1、创建XMLHttpRequest对象
|
||||
var xmlhttp;
|
||||
if (window.XMLHttpRequest) {
|
||||
xmlhttp = new XMLHttpRequest();
|
||||
} else {
|
||||
// 兼容IE5、IE6浏览器。不写也没关系
|
||||
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
|
||||
}
|
||||
// 2、发送请求
|
||||
xmlhttp.open('GET', url, true);
|
||||
xmlhttp.send();
|
||||
// 3、服务端响应
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
var obj = JSON.parse(xmlhttp.responseText);
|
||||
console.log('数据返回成功：' + Jobj);
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 单次调用 ajax
|
||||
myAjax('a.json', (res) => {
|
||||
console.log(res);
|
||||
});
|
||||
|
||||
// 多次调用 ajax。接口请求顺序：a --> b --> c
|
||||
myAjax('a.json', (res) => {
|
||||
console.log(res);
|
||||
myAjax('b.json', (res) => {
|
||||
console.log(res);
|
||||
myAjax('c.json', (res) => {
|
||||
console.log(res);
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Ajax 请求：get 请求举例
|
||||
|
||||
（1）index.html：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ajax 发送 get 请求</h1>
|
||||
<input type="button" value="发送get_ajax请求" id="btnAjax" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// 绑定点击事件
|
||||
document.querySelector('#btnAjax').onclick = function () {
|
||||
myAjax('02-ajax.php', (res) => {
|
||||
console.log(res);
|
||||
console.log('数据返回成功');
|
||||
// 显示在页面上
|
||||
document.querySelector('h1').innerHTML = obj;
|
||||
// alert(xhr.responseText);
|
||||
});
|
||||
};
|
||||
|
||||
function myAjax(url, callback) {
|
||||
var xmlhttp;
|
||||
if (window.XMLHttpRequest) {
|
||||
xmlhttp = new XMLHttpRequest();
|
||||
} else {
|
||||
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
|
||||
}
|
||||
xmlhttp.open('GET', url, true);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
var obj = JSON.parse(xmlhttp.responseText);
|
||||
console.log('数据返回成功：' + Jobj);
|
||||
callback(obj);
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
（2）02-ajax.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
echo 'smyhvae';
|
||||
?>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
### Ajax 多个接口的嵌套请求（重要）
|
||||
|
||||
我们在做异步任务的时候，经常会涉及到多个接口的嵌套请求。比如说，接口 1 请求完成后，需要根据接口 1 的数据请求接口 2；接口 2 请求完成后，需要根据接口 3 的数据请求接口 3，以此类推。
|
||||
|
||||
需求描述：
|
||||
|
||||
- 请求接口 1，根据用户名获取用户 id
|
||||
|
||||
- 请求接口 2，根据用户 id 获取用户的年龄、性别等信息。
|
||||
|
||||
代码实现思路：
|
||||
|
||||
```js
|
||||
myAjax('http://localhost:8888/php/user.php?name=千古', (userInfo) => {
|
||||
// 根据第一个接口返回的 userInfo.id，继续请求第二个接口
|
||||
myAjax(`http://localhost:8888/php/houdunren.php?id=${userInfo['id']}`, (res) => {
|
||||
console.log(response);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
我们在实战开发中，经常会涉及到接口请求之间的**依赖**：需要上一个接口请求返回的数据，来发送本次请求。这种场景经常遇到，需要记住。
|
||||
|
||||
但这种层层嵌套的代码，会导致**回调地域**的问题，也不利于维护。我们在后续的 ES6 章节中，会讲解 Promise，它是一种更优雅的异步任务解决方案。
|
||||
|
||||
## jQuery 中的 Ajax
|
||||
|
||||
JQuery 作为最受欢迎的 js 框架之一，常见的 Ajax 已经帮助我们封装好了，只需要调用即可。更为详细的 api 文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp)
|
||||
|
||||
格式举例：
|
||||
|
||||
```javascript
|
||||
$.ajax({
|
||||
url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址
|
||||
data: 'name=fox&age=18', // 请求参数
|
||||
type: 'GET', //请求的方式
|
||||
success: function (argument) {
|
||||
// 接口请求成功时调用
|
||||
console.log('接口请求成功');
|
||||
},
|
||||
beforeSend: function (argument) {}, // 在发送请求之前调用,可以做一些验证之类的处理
|
||||
error: function (argument) {
|
||||
// 接口请求失败时调用
|
||||
console.log('接口请求失败');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
代码举例：
|
||||
|
||||
（1）index.html
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>jquery-ajax</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="点击" id="btn" />
|
||||
<div id="showInfo"></div>
|
||||
<script type="text/javascript" src="jquery-1.11.2.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#btn').click(function () {
|
||||
$.ajax({
|
||||
url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址
|
||||
dataType: 'text',
|
||||
data: 'name=fox&age=18', // 请求参数
|
||||
type: 'get',
|
||||
success: function (data) {
|
||||
console.log('接口请求成功');
|
||||
alert(data);
|
||||
// $("#showInfo").html(data);
|
||||
},
|
||||
error: function (err) {
|
||||
console.log('接口请求失败：' + err);
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
（2）data.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
$text = 'hello world';
|
||||
|
||||
echo $text;
|
||||
|
||||
?>
|
||||
|
||||
```
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
326
06-JavaScript异步编程：Ajax和Promise/03-Ajax传输json和XML.md
Normal file
326
06-JavaScript异步编程：Ajax和Promise/03-Ajax传输json和XML.md
Normal file
@@ -0,0 +1,326 @@
|
||||
|
||||
|
||||
## Ajax 传输 JSON
|
||||
|
||||
### JSON 的语法
|
||||
|
||||
JSON(JavaScript Object Notation)：是 ECMAScript 的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。
|
||||
|
||||
语法规则：
|
||||
|
||||
- 数据在键值对中
|
||||
|
||||
- 数据由逗号分隔
|
||||
|
||||
- 花括号保存对象
|
||||
|
||||
- 方括号保存数组
|
||||
|
||||
数据类型：
|
||||
|
||||
- 数字（整数或浮点数）
|
||||
|
||||
- 字符串（在双引号中）
|
||||
|
||||
- 逻辑值（true 或 false）
|
||||
|
||||
- 数组（在方括号中）
|
||||
|
||||
- 对象（在花括号中）
|
||||
|
||||
- null
|
||||
|
||||
示例：
|
||||
|
||||
```json
|
||||
// 对象
|
||||
{
|
||||
"name":"fox",
|
||||
"age":"18",
|
||||
"sex":"true",
|
||||
"car":null
|
||||
}
|
||||
|
||||
// 数组
|
||||
[
|
||||
{
|
||||
"name":"小小胡",
|
||||
"age":"1"
|
||||
},
|
||||
{
|
||||
"name":"小二胡",
|
||||
"age":"2"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### JavaScript 中：json 字符串 <--> js 对象
|
||||
|
||||
基本上，所有的语言都有**将 json 字符串转化为该语言对象**的语法。
|
||||
|
||||
比如在 js 中：
|
||||
|
||||
- JSON.parse()：将 JSON 字符串转化为 js 对象。例如：
|
||||
|
||||
```javascript
|
||||
// 将 JSON 字符串格式化为 js 对象
|
||||
var jsObj = JSON.parse(ajax.responseText);
|
||||
```
|
||||
|
||||
- JSON.stringify()：将 JS 对象转化为 JSON 字符串。例如：
|
||||
|
||||
```javascript
|
||||
var Obj = {
|
||||
name: 'fox',
|
||||
age: 18,
|
||||
skill: '撩妹',
|
||||
};
|
||||
|
||||
console.log(Obj);
|
||||
|
||||
// 将 js 对象格式化为 JSON 字符串
|
||||
var jsonStr = JSON.stringify(Obj);
|
||||
```
|
||||
|
||||
### PHP 中：json 字符串 <--> js 对象
|
||||
|
||||
- **json_decode()**方法：将`json`字符串转化为变量。
|
||||
|
||||
- **json_encode()**方法：将变量转化为`json`字符串。
|
||||
|
||||
代码举例：
|
||||
|
||||
```php
|
||||
<?php
|
||||
header("Content-Type:text/html;charset=utf-8");
|
||||
// json字符串
|
||||
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
|
||||
// 字符串转化为 php对象
|
||||
print_r(json_decode($jsonStr));
|
||||
|
||||
echo "<br>";
|
||||
// php数组
|
||||
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
|
||||
// php对象 转化为 json字符串
|
||||
print_r(json_encode($arrayName));
|
||||
?>
|
||||
```
|
||||
|
||||
输出结果：
|
||||
|
||||
```bash
|
||||
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
|
||||
{"name":"littleFox","age":13}
|
||||
|
||||
```
|
||||
|
||||
### ajax 请求解析 json（举例）
|
||||
|
||||
（1）Person.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "小强",
|
||||
"skill": "砍树",
|
||||
"friend": "老板"
|
||||
}
|
||||
```
|
||||
|
||||
（2）myJson.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
// 读取json文件 并返回即可
|
||||
echo file_get_contents('info/Person.json');
|
||||
|
||||
?>
|
||||
```
|
||||
|
||||
（3）getJson.html：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>获取 json 数据</h1>
|
||||
<input type="button" value="获取json" id="btnJson" />
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript">
|
||||
// 获取的是一个 如果要获取多个
|
||||
// document.querySelectorAll(selector)
|
||||
document.querySelector('#btnJson').onclick = function () {
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
ajax.open('get', 'myJson.php');
|
||||
|
||||
ajax.send();
|
||||
|
||||
ajax.onreadystatechange = function () {
|
||||
if (ajax.readyState == 4 && ajax.status == 200) {
|
||||
// json 字符串 是字符串 所以我们可以 通过 responseText获取
|
||||
console.log(ajax.responseText);
|
||||
|
||||
// 转化为 js对象
|
||||
var jsObj = JSON.parse(ajax.responseText);
|
||||
|
||||
console.log(jsObj);
|
||||
|
||||
// 拼接ul s
|
||||
var str = '';
|
||||
|
||||
str += '<ul>';
|
||||
str += '<li>' + jsObj.name + '</li>';
|
||||
str += '<li>' + jsObj.skill + '</li>';
|
||||
str += '<li>' + jsObj.friend + '</li>';
|
||||
str += '</ul>';
|
||||
|
||||
// 设置到界面上
|
||||
|
||||
document.body.innerHTML = str;
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
演示效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## Ajax 传输 XML
|
||||
|
||||
### XML 语法
|
||||
|
||||
XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：[#](http://www.w3school.com.cn/xml/index.asp)。
|
||||
|
||||
**1、XML 声明：**
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
```
|
||||
|
||||
第一行的声明，指定了 XML 版本(1.0)以及使用的编码。
|
||||
|
||||
**2、自定义标签：**
|
||||
|
||||
XML 中没有默认的标签，所有的标签都是我们自己已定义的。例如：
|
||||
|
||||
```xml
|
||||
<fox></fox>
|
||||
<name></name>
|
||||
```
|
||||
|
||||
XML 中没有单标签，都是双标签。
|
||||
|
||||
**3、根节点：**
|
||||
|
||||
XML 中必须要有一个根节点，所有的子节点都放置在根节点下。例如：
|
||||
|
||||
```xml
|
||||
<root1>
|
||||
<name></name>
|
||||
</root1>
|
||||
```
|
||||
|
||||
### XML 解析
|
||||
|
||||
因为 XML 就是标签，所以我们可以直接用**解析 Dom 元素**的方法解析 XML。
|
||||
|
||||
**解析过程：**
|
||||
|
||||
（1）html 部分：（包含 xml ）
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<person id="personXML">
|
||||
<name>fox</name>
|
||||
<age>18</age>
|
||||
<skill>小花花</skill>
|
||||
</person>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
（2）解析 xml：
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
var xmlObj = document.getElementById('personXML');
|
||||
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
|
||||
|
||||
console.log(name);
|
||||
</script>
|
||||
```
|
||||
|
||||
### ajax 请求解析 xml（举例）
|
||||
|
||||
（1）get_xml.php：（里面包含了 xml 文件）
|
||||
|
||||
```php
|
||||
<?php
|
||||
// 设置 返回的为 xml
|
||||
header('content-type:text/xml; charset= utf-8');
|
||||
|
||||
// 读取xml文件 并返回
|
||||
echo file_get_contents('info/star.xml');
|
||||
|
||||
?>
|
||||
```
|
||||
|
||||
上方代码解释：
|
||||
|
||||
- php 自带了 读取 xml 文件的方法。
|
||||
|
||||
- 在 php 中，如果要使用 xml 传输数据，则需要使用 header()设置返回的内容为 xml。
|
||||
|
||||
（2）get_xml.html：（Ajax 请求，获取并解析 xml）
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="获取XMl数据" id="getXML" />
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript">
|
||||
document.querySelector('#getXML').onclick = function () {
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
ajax.open('get', 'get_XMl.php');
|
||||
|
||||
ajax.send();
|
||||
|
||||
ajax.onreadystatechange = function () {
|
||||
if (ajax.readyState == 4 && ajax.status == 200) {
|
||||
// 如果 返回的是 xml文件
|
||||
console.log(ajax.responseText);
|
||||
|
||||
// 异步 对象中 有另外一个属性 用来专门获取 xml
|
||||
// xml对象 在浏览器段 就是一个 document对象
|
||||
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
|
||||
console.log(ajax.responseXML);
|
||||
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
|
||||
// 下面这个 页面文档对象 如果要获取某个标签
|
||||
console.log(window.document);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
```
|
||||
169
06-JavaScript异步编程：Ajax和Promise/04-同源和跨域.md
Normal file
169
06-JavaScript异步编程：Ajax和Promise/04-同源和跨域.md
Normal file
@@ -0,0 +1,169 @@
|
||||
|
||||
## 同源和跨域
|
||||
|
||||
## 同源
|
||||
|
||||
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
|
||||
|
||||
|
||||
|
||||
## 跨域问题的解决方案
|
||||
|
||||
从我自己的网站访问别人网站的内容，就叫跨域。
|
||||
|
||||
|
||||
|
||||
出于安全性考虑，浏览器不允许ajax跨域获取数据。
|
||||
|
||||
|
||||
- iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式。
|
||||
|
||||
- JSONP：script 标签的 src 属性传递数据。
|
||||
|
||||
## JSONP
|
||||
|
||||
JSONP(JSON with Padding)：带补丁的 json，本质是利用了 `<script src=""></script>`标签具有可跨域的特性，由服务端返回一个预先定义好的JS函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
|
||||
|
||||
我们知道， html标签的 src 属性是支持跨域的：
|
||||
|
||||
```html
|
||||
<img src="http://img.smyhvae.com/2016040101.jpg" alt="">
|
||||
```
|
||||
|
||||
jsonp 就是利用这个特性实现的跨域，但用的是 script 标签。如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- jsonp 就是 利用 src，实现的跨域 用的是 script标签 -->
|
||||
<script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
上方那一行的代码，意思是：刷新A服务器上的index页面后，会去请求 B 服务器上的 `myData.php` 这个页面。而且请求的方式是 get 请求。
|
||||
|
||||
但是 B 服务器上的页面不是你想请求就可以请求的，大家一起配合才可以。
|
||||
|
||||
|
||||
**具体实现步骤：**
|
||||
|
||||
需要首先声明的是，jsonp 只能通过 GET 方式进行请求。
|
||||
|
||||
（1）A客户端的代码：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript">
|
||||
|
||||
// 定义 eatFood()方法
|
||||
function fn(data) {
|
||||
console.log('我被调用了哦');
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 使用 script标签 发送了 get请求 去到了一个 php页面 -->
|
||||
<script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>
|
||||
```
|
||||
|
||||
|
||||
我们来分析上方代码中的最后一行的那个url：A 客户端请求的是 B服务器上的 `01.php`页面。url里有个`callback1=fn`，意思是：callback1是A和B 之间的约定，约定后，将执行方法 fn。
|
||||
|
||||
其实，fn方法已经在最后一行代码中执行了。只不过，fn方法里的data数据，是从 B 服务器中获取的。
|
||||
|
||||
（2）B服务器端的代码：
|
||||
|
||||
```php
|
||||
<?php
|
||||
$mycallBack = $_GET['callback1'];
|
||||
|
||||
$arr = array("zhangsan","lisi","zhaoliu");
|
||||
|
||||
echo $mycallBack.`(`.json_encode($arr).`)`; //字符串拼接
|
||||
?>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
第一行的`callback1` 是A和B之间的约定，二者必须一致。
|
||||
|
||||
echo语句中输出的内容，即使要返回给A客户端的内容，此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。
|
||||
|
||||
|
||||
`json_encode`指的是，将php对象转化为 json。
|
||||
|
||||
|
||||
刷新A页面，输出结果为：
|
||||
|
||||
```
|
||||
mycallBack(["zhangsan","lisi","zhaoliu"])
|
||||
```
|
||||
|
||||
|
||||
## jQuery 中的 JSONP
|
||||
|
||||
我们知道，jQuery 中发送 Ajax 请求，格式是：
|
||||
|
||||
```javascript
|
||||
$("#btn").click(function(){
|
||||
$.ajax({
|
||||
url:"./data.php?callback1=fn",
|
||||
dataType:"jsonp",
|
||||
type:"get",
|
||||
//jsonp:"callback1", //传递给B服务器的回调函数的名字（默认为 callback）
|
||||
//jsonCallBack:"fn" //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
|
||||
success:function(data){
|
||||
alert(data);
|
||||
//$("#showInfo").html(data);
|
||||
},
|
||||
error:function(e){
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
那如果数据是 JSONP，上方代码则改为：
|
||||
|
||||
|
||||
```javascript
|
||||
$("#btn").click(function(){
|
||||
$.ajax({
|
||||
url:"./data.php?fn",
|
||||
dataType:"text",
|
||||
type:"get",
|
||||
success:function(data){
|
||||
alert(data);
|
||||
//$("#showInfo").html(data);
|
||||
},
|
||||
error:function(e){
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
参考链接：https://www.cnblogs.com/2050/p/3191744.html
|
||||
|
||||
642
06-JavaScript异步编程：Ajax和Promise/05-Promise入门详解.md
Normal file
642
06-JavaScript异步编程：Ajax和Promise/05-Promise入门详解.md
Normal file
@@ -0,0 +1,642 @@
|
||||
## 为什么需要 Promise？
|
||||
|
||||
我们在前面的文章《JavaScript 基础：异步编程和 Ajax/单线程和异步》中讲过，Javascript 是⼀⻔单线程语⾔。早期我们解决异步场景时，⼤部分情况都是通过回调函数来进⾏。
|
||||
|
||||
（如果你还不了解单线程和异步的概念，可以先去回顾上一篇文章。）
|
||||
|
||||
### 回调的定义
|
||||
|
||||
把函数 A 传给另一个函数 B 调用，那么函数 A 就是回调函数。
|
||||
|
||||
例如在浏览器中发送 ajax 请求，就是常⻅的⼀个异步场景，发送请求后，需要等待一段时间，等服务端响应之后我们才能拿到结果。如果我们希望在异步结束之后执⾏某个操作，就只能通过**回调函数**这样的⽅式进⾏操作。
|
||||
|
||||
```js
|
||||
var dynamicFunc = function (callback) {
|
||||
setTimeout(function () {
|
||||
callback();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
dynamicFunc(function () {
|
||||
console.log('qian gu');
|
||||
});
|
||||
```
|
||||
|
||||
例如上⾯这个例⼦，dynamicFunc 就是⼀个异步函数，⾥⾯ setTimeout 会在 1s 之后调⽤传⼊的 callback 函数。按照上⾯的调⽤⽅式，最终 1s 之后，会打印 qian gu 这个结果。
|
||||
|
||||
为了能使回调函数以更优雅的⽅式进⾏调⽤，在 ES6 语法中，新增了⼀个名为 Promise 的新规范。
|
||||
|
||||
### 回调的缺点
|
||||
|
||||
回调的写法比较直观，不需要 return，层层嵌套即可。但也存在两个问题：
|
||||
|
||||
- 1、如果嵌套过深，则会出现**回调地狱**的问题。
|
||||
|
||||
- 2、不同的函数，回调的参数，在写法上可能不一致，导致不规范、且需要**单独记忆**。
|
||||
|
||||
我们来具体看看这两个问题。
|
||||
|
||||
**1、回调地狱的问题**：
|
||||
|
||||
如果多个异步函数存在依赖关系（比如，需要等第一个异步函数执行完成后，才能执行第二个异步函数；等第二个异步函数执行完毕后，才能执行第三个异步函数），就需要多个异步函数进⾏层层嵌套，⾮常不利于后续的维护，而且会导致**回调地狱**的问题。
|
||||
|
||||
关于回调地狱，我们来举一个形象的例子：
|
||||
|
||||
> 假设买菜、做饭、洗碗、倒厨余垃圾都是异步的。
|
||||
|
||||
> 但真实的场景中，实际的操作流程是：买菜成功之后，才能开始做饭。做饭成功后，才能开始洗碗。洗碗完成后， 再倒厨余垃圾。这里的一系列动作就涉及到了多层嵌套调用，也就是回调地狱。
|
||||
|
||||
关于回调地狱，我们来看看两段代码。
|
||||
|
||||
定时器的代码举例：（回调地狱）
|
||||
|
||||
```js
|
||||
setTimeout(function () {
|
||||
console.log('qiangu1');
|
||||
setTimeout(function () {
|
||||
console.log('qiangu2');
|
||||
setTimeout(function () {
|
||||
console.log('qiangu3');
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
ajax 请求的代码举例：（回调地狱）
|
||||
|
||||
```js
|
||||
// 伪代码
|
||||
ajax('a.json', (res1) => {
|
||||
console.log(res1);
|
||||
ajax('b.json', (res2) => {
|
||||
console.log(res2);
|
||||
ajax('c.json', (res3) => {
|
||||
console.log(res3);
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**2、回调的写法不一致问题**：
|
||||
|
||||
```js
|
||||
// Node.js 读取文件时，成功回调和失败回调，是通过 error参数来区分
|
||||
readFile('d:\\readme.text', function (error, data) {
|
||||
if (error) {
|
||||
console.log('文件读取失败');
|
||||
} else {
|
||||
console.log('文件读取成功');
|
||||
}
|
||||
});
|
||||
|
||||
// jQuery的 ajax 写法中，成功回调和失败回调，是通过两个回调函数来区分
|
||||
$.ajax({
|
||||
url: '/ajax.json',
|
||||
success: function (response) {
|
||||
console.log('文件读取成功');
|
||||
},
|
||||
error: function (err) {
|
||||
console.log('文件读取失败');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
我们可以看到，上面的代码中，成功回调和失败回调，写法不统一，需要单独记忆，容易出错。
|
||||
|
||||
**小结**：
|
||||
|
||||
在 ES5 中，当进行多层嵌套回调时，会导致代码层次过多，很难进行后续维护和二次开发；而且会导致**回调地狱**的问题。ES6 中的 Promise 就可以解决这两个问题。
|
||||
|
||||
当然， Promise 的更强大功能，不止于此。我们来一探究竟。
|
||||
|
||||
### Promise 的介绍和优点
|
||||
|
||||
ES6 中的 Promise 是异步编程的一种方案。从语法上讲，Promise 是一个对象，它可以获取异步操作的消息。
|
||||
|
||||
Promise 对象, 可以**用同步的表现形式来书写异步代码**（也就是说，代码看起来是同步的，但本质上的运行过程是异步的）。使用 Promise 主要有以下好处：
|
||||
|
||||
- 可以很好地解决**回调地狱**的问题（避免了层层嵌套的回调函数）。
|
||||
|
||||
- 语法非常简洁、可读性强，便于后期维护。Promise 对象提供了简洁的 API，使得控制异步操作更加容易。
|
||||
|
||||
Promise 的伪代码结构，大概是这样的：
|
||||
|
||||
```js
|
||||
// 伪代码1
|
||||
myPromise()
|
||||
.then(
|
||||
function () {},
|
||||
function () {}
|
||||
)
|
||||
.then(
|
||||
function () {},
|
||||
function () {}
|
||||
)
|
||||
.then(
|
||||
function () {},
|
||||
function () {}
|
||||
);
|
||||
|
||||
// 伪代码2
|
||||
是时候展现真正的厨艺了().然后(买菜).然后(做饭).然后(洗碗);
|
||||
```
|
||||
|
||||
上面的伪代码可以看出，即便在业务逻辑上是层层嵌套，但是代码写法上，却十分优雅，也没有过多的嵌套。
|
||||
|
||||
## Promise 对象的用法和状态
|
||||
|
||||
### 使用 Promise 的基本步骤
|
||||
|
||||
（1）通过 `new Promise()` 构造出一个 Promise 实例。Promise 的构造函数中传入一个参数，这个参数是一个函数，该函数用于处理异步任务。
|
||||
|
||||
（2）函数中传入两个参数：resolve 和 reject，分别表示异步执行成功后的回调函数和异步执行失败后的回调函数。代表着我们需要改变当前实例的状态到**已完成**或是**已拒绝**。
|
||||
|
||||
（3）通过 promise.then() 和 promise.catch() 处理返回结果（这里的 `promise` 指的是 Promise 实例）。
|
||||
|
||||
看到这里，你估计还是不知道 Promise 怎么使用。我们不妨来看一下 Promise 有哪些状态，便一目了然。要知道，Promise 的精髓在于**对异步操作的状态管理**。
|
||||
|
||||
### promise 对象的 3 个状态
|
||||
|
||||
- 初始化（等待中）：pending
|
||||
|
||||
- 成功：fulfilled
|
||||
|
||||
- 失败：rejected
|
||||
|
||||
**步骤 1**：
|
||||
|
||||
当 new Promise()执行之后，promise 对象的状态会被初始化为`pending`，这个状态是初始化状态。`new Promise()`这行代码，括号里的内容是同步执行的。括号里可以再定义一个 异步任务的 function，function 有两个参数：resolve 和 reject。如下：
|
||||
|
||||
- 如果请求成功了，则执行 resolve()，此时，promise 的状态会被自动修改为 fulfilled。
|
||||
|
||||
- 如果请求失败了，则执行 reject()，此时，promise 的状态会被自动修改为 rejected
|
||||
|
||||
（2）promise.then()方法：**只有 promise 的状态被改变之后，才会走到 then 或者 catch**。也就是说，在 new Promise()的时候，如果没有写 resolve()，则 promise.then() 不执行；如果没有写 reject()，则 promise.catch() 不执行。
|
||||
|
||||
`then()`括号里面有两个参数，分别代表两个函数 function1 和 function2：
|
||||
|
||||
- 如果 promise 的状态为 fulfilled（意思是：如果请求成功），则执行 function1 里的内容
|
||||
|
||||
- 如果 promise 的状态为 rejected（意思是，如果请求失败），则执行 function2 里的内容
|
||||
|
||||
另外，resolve()和 reject()这两个方法，是可以给 promise.then()传递参数的。
|
||||
|
||||
关于 promise 的状态改变，以及如何处理状态改变，伪代码及注释如下：
|
||||
|
||||
```javascript
|
||||
// 创建 promise 实例
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
//进来之后，状态为pending
|
||||
console.log('同步代码'); //这行代码是同步的
|
||||
//开始执行异步操作（这里开始，写异步的代码，比如ajax请求 or 开启定时器）
|
||||
if (异步的ajax请求成功) {
|
||||
console.log('333');
|
||||
resolve('请求成功，并传参'); //如果请求成功了，请写resolve()，此时，promise的状态会被自动修改为fulfilled（成功状态）
|
||||
} else {
|
||||
reject('请求失败，并传参'); //如果请求失败了，请写reject()，此时，promise的状态会被自动修改为rejected（失败状态）
|
||||
}
|
||||
});
|
||||
console.log('222');
|
||||
|
||||
//调用promise的then()：开始处理成功和失败
|
||||
promise.then(
|
||||
(successMsg) => {
|
||||
// 处理 promise 的成功状态：如果promise的状态为fulfilled，则执行这里的代码
|
||||
console.log(successMsg, '成功了'); // 这里的 successMsg 是前面的 resolve('请求成功，并传参') 传过来的参数
|
||||
},
|
||||
(errorMsg) => {
|
||||
//处理 promise 的失败状态：如果promise的状态为rejected，则执行这里的代码
|
||||
console.log(errorMsg, '失败了'); // 这里的 errorMsg 是前面的 reject('请求失败，并传参') 传过来的参数
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
上面的注释要多看几遍。
|
||||
|
||||
## 几点补充
|
||||
|
||||
### new Promise() 是同步代码
|
||||
|
||||
`new Promise()`这行代码本身是同步的。promise 如果没有使用 resolve 或 reject 更改状态时，状态为 pending。
|
||||
|
||||
**举例1**：
|
||||
|
||||
```js
|
||||
const promiseA = new Promise((resolve, reject) => {});
|
||||
console.log(promiseA); // 此时 promise 的状态为 pending（准备阶段）
|
||||
```
|
||||
|
||||
上面的代码中，我既没有写 reslove()，也没有写 reject()。也就是说，这个 promise 一直处于准备阶段。
|
||||
|
||||
当完成异步任务之后，状态分为成功或失败，此时我们就可以用 reslove() 和 reject() 来修改 promise 的状态。
|
||||
|
||||
**举例2**：
|
||||
|
||||
```js
|
||||
new Promise((resolve, reject) => {
|
||||
console.log('promise1'); // 这行代码是同步代码，会立即执行
|
||||
}).then((res) => {
|
||||
console.log('promise then:' + res); // 这行代码不会执行，因为前面没有写 resolve()，所以走不到 .then
|
||||
});
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
promise1
|
||||
```
|
||||
|
||||
|
||||
上方代码，仔细看注释：如果前面没有写 `resolve()`，那么后面的 `.then`是不会执行的。
|
||||
|
||||
**举例3**：
|
||||
|
||||
```js
|
||||
new Promise((resolve, reject) => {
|
||||
resolove();
|
||||
console.log('promise1'); // 代码1：同步任务，会立即执行
|
||||
}).then(res => {
|
||||
console.log('promise then)'; // 代码2：异步任务中的微任务
|
||||
})
|
||||
|
||||
console.log('千古壹号'); // 代码3：同步任务
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
promise1
|
||||
千古壹号
|
||||
promise then
|
||||
```
|
||||
|
||||
代码解释：代码1是同步代码，所以最先执行。代码2是**微任务**里面的代码，所以要先等同步任务（代码3）先执行完。当写完`resolve();`之后，就会立刻把 `.then()`里面的代码加入到微任务队列当中。
|
||||
|
||||
补充知识：异步任务分为“宏任务”、“微任务”两种。我们到后续的章节中再详细讲。
|
||||
|
||||
|
||||
### Promise 的状态一旦改变，就不能再变
|
||||
|
||||
代码举例：
|
||||
|
||||
```js
|
||||
const p = new Promise((resolve, reject) => {
|
||||
resolve(1); // 代码执行到这里时， promise状态是 fulfilled
|
||||
reject(2); // 尝试修改状态为 rejected，是不行的。因为状态执行到上一行时，已经被改变了。
|
||||
});
|
||||
|
||||
p.then((res) => {
|
||||
console.log(res);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
```
|
||||
|
||||
上方代码的打印结果是 1，而不是 2，详见注释。
|
||||
|
||||
### Promise 的状态改变，是不可逆的
|
||||
|
||||
### 小结
|
||||
|
||||
1、promise 有三种状态：等待中、成功、失败。等待中状态可以更改为成功或失败，已经更改过状态后⽆法继续更改（例如从失败改为成功）。
|
||||
|
||||
2、promise 实例中需要传⼊⼀个函数，这个函数接收两个参数，执⾏第⼀个参数之后就会改变当前 promise 为「成功」状态，执⾏第⼆个参数之后就会变为「失败」状态。
|
||||
|
||||
3、通过 .then ⽅法，即可在上⼀个 promise 达到成功时继续执⾏下⼀个函数或 promise。同时通过 resolve 或 reject 时传⼊参数，即可给下⼀个函数或 promise 传⼊初始值。
|
||||
|
||||
4、失败的 promise，后续可以通过 promise 自带的 .catch ⽅法或是 .then ⽅法的第⼆个参数进⾏捕获。
|
||||
|
||||
### Promise 规范
|
||||
|
||||
Promise 是⼀个拥有 then ⽅法的对象或函数。任何符合 promise 规范的对象或函数都可以成为 Promise。
|
||||
|
||||
关于 promise 规范的详细解读，可以看下面这个链接：
|
||||
|
||||
- Promises/A+ 规范：<https://promisesaplus.com/>
|
||||
|
||||
了解这些常见概念之后，接下来，我们来具体看看 promise 的代码是怎么写的。
|
||||
|
||||
## Promise 封装异步任务
|
||||
|
||||
### 传统写法
|
||||
|
||||
写法 1：
|
||||
|
||||
```js
|
||||
// 定义一个异步的延迟函数：异步函数结束1秒之后，再执行cb回调函数
|
||||
function fun1(cb) {
|
||||
setTimeout(function () {
|
||||
console.log('即将执行cb回调函数');
|
||||
cb();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 先执行异步函数 fun1，再执行回调函数 myCallback
|
||||
fun1(myCallback);
|
||||
|
||||
// 定义回调函数
|
||||
function myCallback() {
|
||||
console.log('我是延迟执行的cb回调函数');
|
||||
}
|
||||
```
|
||||
|
||||
写法 2：（精简版，更常见）
|
||||
|
||||
```js
|
||||
// 定义一个异步的延迟函数：异步函数结束1秒之后，再执行cb回调函数
|
||||
function fun1(cb) {
|
||||
setTimeout(cb, 1000);
|
||||
}
|
||||
|
||||
// 先执行异步函数fun1，再执行回调函数
|
||||
fun1(function () {
|
||||
console.log('我是延迟执行的cb回调函数');
|
||||
});
|
||||
```
|
||||
|
||||
上⾯的例⼦就是最传统的写法，在异步结束后通过传入回调函数的方式执⾏函数。
|
||||
|
||||
学习 Promise 之后，我们可以将这个异步函数封装为 Promise，如下。
|
||||
|
||||
### Promise 写法
|
||||
|
||||
```js
|
||||
function myPromise() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
/* 【重要】上面的 myPromise 也可以写成：
|
||||
function myPromise() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
// 先执行异步函数fun1，再执行回调函数
|
||||
myPromise().then(() => {
|
||||
console.log('我是延迟执行的回调函数');
|
||||
});
|
||||
```
|
||||
|
||||
## Promise 封装 Ajax 请求
|
||||
|
||||
### 传统写法
|
||||
|
||||
```js
|
||||
// 封装 ajax 请求：传入回调函数 success 和 fail
|
||||
function ajax(url, success, fail) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 执行 ajax 请求
|
||||
ajax(
|
||||
'/a.json',
|
||||
(res) => {
|
||||
console.log('qianguyihao 第一个接口请求成功:' + JSON.stringify(res));
|
||||
(err) => {
|
||||
console.log('qianguyihao 请求失败:' + JSON.stringify(err));
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
上面的传统写法里，定义和执行 ajax 时需要传⼊ success 和 fail 这两个回调函数，进而执行回调函数。
|
||||
|
||||
注意看注释，`callback && callback()`这种格式的写法，很常见。
|
||||
|
||||
### Promise 写法
|
||||
|
||||
有了 Promise 之后，我们不需要传入回调函数，而是：
|
||||
|
||||
- 先将 promise 实例化；
|
||||
|
||||
- 然后在原来执行回调函数的地方，改为执行对应的改变 promise 状态的函数；
|
||||
|
||||
- 并通过 then ... catch 或者 then ...then 等写法，实现链式调用，提高代码可读性。
|
||||
|
||||
和传统写法相比，promise 在写法上的大致区别是：定义异步函数的时候，将 callback 改为 resolve 和 reject，待状态改变之后，我们在外面控制具体执行哪些函数。
|
||||
|
||||
写法 1：
|
||||
|
||||
```js
|
||||
// 封装 ajax 请求：传入回调函数 success 和 fail
|
||||
function ajax(url, success, fail) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 第一步：model层的接口封装
|
||||
function promiseA() {
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax('xxx_a.json', (res) => {
|
||||
// 这里的 res 是接口的返回结果。返回码 retCode 是动态数据。
|
||||
if (res.retCode == 0) {
|
||||
// 接口请求成功时调用
|
||||
resolve('request success' + res);
|
||||
} else {
|
||||
// 接口请求失败时调用
|
||||
reject({ retCode: -1, msg: 'network error' });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 第二步：业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的，也就是从接口拿到的数据
|
||||
promiseA()
|
||||
.then((res) => {
|
||||
// 从 resolve 获取正常结果：接口请求成功后，打印接口的返回结果
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
上方代码中，当从接口返回的数据`data.retCode`的值（接口返回码）不同时，可能会走 resolve，也可能会走 reject，这个由你自己的业务决定。
|
||||
|
||||
接口返回的数据，一般是`{ retCode: 0, msg: 'qianguyihao' }` 这种 json 格式， retCode 为 0 代表请求接口成功，所以前端对应会写`if (res.retCode == 0) `这样的逻辑。
|
||||
|
||||
另外，上面的写法中，是将 promise 实例定义成了一个**函数** `promiseA`。我们也可以将 promise 实例定义成一个**变量** `promiseB`，达到的效果和上面的代码是一模一样的。写法如下：（写法上略有区别）
|
||||
|
||||
写法 2：
|
||||
|
||||
```js
|
||||
// 第一步：model层的接口封装
|
||||
const promiseB = new Promise((resolve, reject) => {
|
||||
ajax('xxx_a.json', (res) => {
|
||||
// 这里的 res 是接口的返回结果。返回码 retCode 是动态数据。
|
||||
if (res.retCode == 0) {
|
||||
// 接口请求成功时调用
|
||||
resolve('request success' + res);
|
||||
} else {
|
||||
// 接口请求失败时调用
|
||||
reject({ retCode: -1, msg: 'network error' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 第二步：业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的，也就是从接口拿到的数据
|
||||
promiseB
|
||||
.then((res) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
注意，如果你用的是写法 1（将 promise 实例定义为函数），则调用 promise 的时候是`promiseA().then()`，如果你用的是写法 2（将 promise 实例定位为函数），则调用的时候用的是`promiseB.then()`。写法 1 多了个括号，不要搞混了。
|
||||
|
||||
## 处理 reject 失败状态的两种写法
|
||||
|
||||
我们有两种写法可以捕获并处理 reject 异常状态：
|
||||
|
||||
- 写法 1：通过 catch 方法捕获 状态变为已 reject 时的 promise
|
||||
|
||||
- 写法 2：then 可以传两个参数，第⼀个参数为 resolve 后执⾏，第⼆个参数为 reject 后执⾏。
|
||||
|
||||
### 代码格式
|
||||
|
||||
这两种写法的**代码格式**如下：
|
||||
|
||||
```js
|
||||
// 第一步：model层的接口封装
|
||||
function promiseA() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 这里做异步任务（比如 ajax 请求接口，或者定时器）
|
||||
...
|
||||
...
|
||||
});
|
||||
}
|
||||
|
||||
const onResolve = function (res) {
|
||||
console.log(res);
|
||||
};
|
||||
|
||||
const onReject = function (err) {
|
||||
console.log(err);
|
||||
};
|
||||
|
||||
// 写法1：通过 catch 方法捕获 状态变为已拒绝时的 promise
|
||||
promiseA().then(onResolve).catch(onReject);
|
||||
|
||||
// 写法2：then 可以传两个参数，第⼀个参数为 resolve 后执⾏，第⼆个参数为 reject 后执⾏
|
||||
promiseA().then(onResolve, onReject);
|
||||
|
||||
// 【错误写法】写法3：通过 try catch 捕获 状态变为已拒绝时的 promise
|
||||
// 这种写法是错误的，因为 try catch只能捕获同步代码里的异常，而 promise.reject() 是异步代码。
|
||||
try {
|
||||
promiseA().then(onResolve);
|
||||
} catch (e) {
|
||||
// 语法上，catch必须要传入一个参数，否则报错
|
||||
onReject(e);
|
||||
}
|
||||
```
|
||||
|
||||
如注释所述：前面的段落里，我们捕获 reject 异常用的就是写法 1。如果你写法 2 也是可以的。
|
||||
|
||||
需要注意的是，上面的写法 3 是错误的。运行之后，控制台会报如下错误：
|
||||
|
||||
|
||||
|
||||
[解释如下](https://blog.csdn.net/xiaoluodecai/article/details/107297404)：
|
||||
|
||||
try-catch 主要用于捕获异常，注意，这里的异常是指**同步**函数的异常。如果 try 里面的异步方法出现了异常，此时 catch 是无法捕获到异常的。
|
||||
|
||||
原因是：当异步函数抛出异常时，对于宏任务而言，执行函数时已经将该函数推入栈，此时并不在 try-catch 所在的栈，所以 try-catch 并不能捕获到错误。对于微任务而言（比如 promise）promise 的构造函数的异常只能被自带的 reject 也就是.catch 函数捕获到。
|
||||
|
||||
（2）写法 1 中，`promiseA().then().catch()`和`promiseA().catch().then()`区别在于：前者可以捕获到 `then` 里面的异常，后者不可以。
|
||||
|
||||
### 代码举例
|
||||
|
||||
这两种写法的**代码举例**如下：
|
||||
|
||||
```js
|
||||
function promiseA() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 这里做异步任务（比如 ajax 请求接口，或者定时器）
|
||||
...
|
||||
...
|
||||
});
|
||||
}
|
||||
|
||||
// 写法1
|
||||
promiseB()
|
||||
.then((res) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log('接口请求成功时，走这里');
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log('接口请求失败时，走这里');
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
console.log('无论接口请求成功与否，都会走这里');
|
||||
});
|
||||
|
||||
|
||||
// 写法 2：（和写法 1 等价）
|
||||
promiseB()
|
||||
.then(
|
||||
(res) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log('接口请求成功时，走这里');
|
||||
console.log(res);
|
||||
},
|
||||
(err) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log('接口请求失败时，走这里');
|
||||
console.log(err);
|
||||
}
|
||||
)
|
||||
.finally(() => {
|
||||
console.log('无论接口请求成功与否，都会走这里');
|
||||
});
|
||||
```
|
||||
|
||||
**代码解释**：写法 1 和写法 2 的作用是完全等价的。只不过，写法 2 是把 catch 里面的代码作为 then 里面的第二个参数而已。
|
||||
|
||||
## 总结
|
||||
|
||||
了解这些内容之后， 你已经对 Promise 有了基本了解。下一篇文章，我们来讲一讲 Promise 在实战开发的常见用法。
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [当面试官问你 Promise 的时候，他究竟想听到什么？](https://zhuanlan.zhihu.com/p/29235579)
|
||||
|
||||
- [手写一个 Promise/A+,完美通过官方 872 个测试用例](https://www.cnblogs.com/dennisj/p/12660388.html)
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
411
06-JavaScript异步编程：Ajax和Promise/06-Promise的链式调用.md
Normal file
411
06-JavaScript异步编程：Ajax和Promise/06-Promise的链式调用.md
Normal file
@@ -0,0 +1,411 @@
|
||||
## Promise 的链式调用：处理多次 Ajax 请求【重要】
|
||||
|
||||
实际开发中，我们经常需要同时请求多个接口。比如说：在请求完`接口1`的数据`data1`之后，需要根据`data1`的数据，继续请求接口 2，获取`data2`；然后根据`data2`的数据，继续请求接口 3。
|
||||
|
||||
换而言之，现在有三个网络请求，请求 2 必须依赖请求 1 的结果，请求 3 必须依赖请求 2 的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。
|
||||
|
||||
这种场景其实就是接口的多层嵌套调用。有了 Promise 之后，我们可以把多层嵌套调用按照**线性**的方式进行书写，非常优雅。也就是说：Promise 可以把原本的**多层嵌套写法**改进为**链式写法**。
|
||||
|
||||
### ES5 中的传统写法
|
||||
|
||||
```js
|
||||
// 封装 ajax 请求：传入回调函数 success 和 fail
|
||||
function ajax(url, success, fail) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 执行 ajax 请求
|
||||
ajax(
|
||||
'/a.json',
|
||||
(res) => {
|
||||
console.log('qianguyihao 第一个接口请求成功:' + JSON.stringify(res));
|
||||
// ajax嵌套调用
|
||||
ajax('b.json', (res) => {
|
||||
console.log('qianguyihao 第二个接口请求成功:' + JSON.stringify(res));
|
||||
// ajax嵌套调用
|
||||
ajax('c.json', (res) => {
|
||||
console.log('qianguyihao 第三个接口请求成功:' + JSON.stringify(res));
|
||||
});
|
||||
});
|
||||
},
|
||||
(err) => {
|
||||
console.log('qianguyihao 请求失败:' + JSON.stringify(err));
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
上面的代码层层嵌套，可读性很差，而且出现了我们常说的回调地狱问题。
|
||||
|
||||
### Promise 链式调用（初步写法，方便理解）
|
||||
|
||||
如果我们不对 Promise 的链式调用进行封装，那么，它的简单写法是下面这样的：
|
||||
|
||||
```js
|
||||
// 封装 ajax 请求：传入回调函数 success 和 fail
|
||||
function ajax(url, success, fail) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
new Promise((resolve, reject) => {
|
||||
ajax('a.json', (res) => {
|
||||
console.log(res);
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.then((res) => {
|
||||
console.log('a成功');
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax('b.json', (res) => {
|
||||
console.log(res);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
})
|
||||
.then((res) => {
|
||||
console.log('b成功');
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax('c.json', (res) => {
|
||||
console.log(res);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
})
|
||||
.then((res) => {
|
||||
cnosole.log('c成功');
|
||||
});
|
||||
```
|
||||
|
||||
上面代码中，then 是可以链式调用的，一旦 return 一个新的 promise 实例之后，后面的 then 就可以拿到前面 resolve 出来的数据。这种**扁平化**的写法，更方便维护；并且可以更好的**管理**请求成功和失败的状态。
|
||||
|
||||
但是，你可能会奇怪，上面的代码，怎么这么多？而且有不少重复。因为这里只是采用了一种笨拙的方式来写，为的是方便大家理解 promise 的执行过程。我们其实可以对 promise 的链式调用进行封装。
|
||||
|
||||
怎么个封装法呢？上面的代码中，每次在 return 一个 promise 的时候，只是 url 地址不一样，其他的代码是一样的。所以我们可以把重复的代码封装成函数。写法如下。
|
||||
|
||||
### Promise 链式调用（封装一个接口）
|
||||
|
||||
针对同一个接口的多次嵌套调用，采用 promise 封装后的写法如下：
|
||||
|
||||
```js
|
||||
// 定义 ajax 请求：传入回调函数 success 和 fail
|
||||
function ajax(url, success, fail) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 第一步：model层，接口封装
|
||||
function getPromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax(url, (res) => {
|
||||
// 这里的 res 是接口的返回结果。返回码 retCode 是动态数据。
|
||||
if (res.retCode == 0) {
|
||||
// 接口请求成功时调用
|
||||
resolve('request success' + res);
|
||||
} else {
|
||||
// 接口请求异常时调用
|
||||
reject({ retCode: -1, msg: 'network error' });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 第二步：业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的，也就是从接口拿到的数据
|
||||
getPromise('a.json')
|
||||
.then((res) => {
|
||||
// a 请求成功。从 resolve 获取正常结果：接口请求成功后，打印a接口的返回结果
|
||||
console.log(res);
|
||||
return getPromise('b.json'); // 继续请求 b
|
||||
})
|
||||
.then((res) => {
|
||||
// b 请求成功
|
||||
console.log(res);
|
||||
return getPromise('c.json'); // 继续请求 c
|
||||
})
|
||||
.then((res) => {
|
||||
// c 请求成功
|
||||
console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
// 从 reject中获取异常结果
|
||||
console.log(e);
|
||||
});
|
||||
```
|
||||
|
||||
怎么样？上面代码是不是非常简洁？而且可读性很强。
|
||||
|
||||
代码写到这里，我们还可以再继续优化一下。细心的你可以发现，我们在做三次嵌套请求的时候，针对 resolve 和 reject 的处理时机是一样的。如果你的业务是针对**同一个接口**连续做了三次调用，只是请求**传参不同**，那么，按上面这样写是没有问题的。
|
||||
|
||||
但是，真正在实战中，我们往往需要嵌套请求**多个不同的接口**，要处理的 resolve 和 reject 的时机往往是不同的，所以需要分开封装不同的 Promise 实例，这在实战开发中更为常见。代码应该是像下面这样写。
|
||||
|
||||
### Promise 链式调用（封装多个接口）
|
||||
|
||||
针对多个不同接口的嵌套调用，采用 promise 封装后的写法如下：
|
||||
|
||||
```js
|
||||
// 封装 ajax 请求：传入回调函数 success 和 fail
|
||||
function ajax(url, success, fail) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url);
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||||
success && success(xmlhttp.responseText);
|
||||
} else {
|
||||
fail && fail(new Error('接口请求失败'));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Promise 封装接口1
|
||||
function request1() {
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax('https://www.baidu.com', (res) => {
|
||||
if (res.retCode == 201) {
|
||||
// 接口请求成功时调用：这里的 res 是接口1的返回结果
|
||||
resolve('request1 success' + res);
|
||||
} else {
|
||||
// 接口请求异常时调用异常
|
||||
reject('接口1请求失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Promise 封装接口2
|
||||
function request2() {
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax('https://www.jd.com', (res) => {
|
||||
if (res.retCode == 202) {
|
||||
// 这里的 res 是接口2的返回结果
|
||||
resolve('request2 success' + res);
|
||||
} else {
|
||||
reject('接口2请求失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Promise 封装接口3
|
||||
function request3() {
|
||||
return new Promise((resolve, reject) => {
|
||||
ajax('https://www.taobao.com', (res) => {
|
||||
if (res.retCode == 203) {
|
||||
// 这里的 res 是接口3的返回结果
|
||||
resolve('request3 success' + res);
|
||||
} else {
|
||||
reject('接口3请求失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 先发起request1，等resolve后再发起request2；紧接着，等 request2有了 resolve之后，再发起 request3
|
||||
request1()
|
||||
.then((res1) => {
|
||||
// 接口1请求成功
|
||||
console.log(res1);
|
||||
return request2();
|
||||
})
|
||||
.then((res2) => {
|
||||
// 接口2请求成功
|
||||
console.log(res2);
|
||||
return request3();
|
||||
})
|
||||
.then((res3) => {
|
||||
// 接口3请求成功
|
||||
console.log(res3);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 从 reject中获取异常结果
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
这段代码很经典，你一定要多看几遍，多默写几遍。倒背如流也不过分。
|
||||
|
||||
## 链式调用，如何处理 reject 失败状态
|
||||
|
||||
### 例 1：不处理 reject
|
||||
|
||||
```js
|
||||
getPromise('a.json')
|
||||
.then(
|
||||
(res) => {
|
||||
console.log(res);
|
||||
return getPromise('b.json'); // 继续请求 b
|
||||
},
|
||||
(err) => {
|
||||
// a 请求失败
|
||||
console.log('a: err');
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
// b 请求成功
|
||||
console.log(res);
|
||||
return getPromise('c.json'); // 继续请求 c
|
||||
})
|
||||
.then((res) => {
|
||||
// c 请求成功
|
||||
console.log('c：success');
|
||||
});
|
||||
```
|
||||
|
||||
上面的代码中，假设 a 请求失败，那么，后面的代码会怎么走呢？
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
a: err
|
||||
undefined
|
||||
c：success
|
||||
```
|
||||
|
||||
我们可以看到，虽然 a 请求失败，但后续的请求依然会继续执行。
|
||||
|
||||
为何打印结果的第二行是 undefined？这是因为，当 a 请求走到 reject 之后，我们并没有做任何处理。这就导致，代码走到第二个 `then`的时候，**其实是在执行一个空的 promise**。
|
||||
|
||||
### 例 2：单独处理 reject
|
||||
|
||||
```js
|
||||
getPromise('a.json')
|
||||
.then(
|
||||
(res) => {
|
||||
console.log(res);
|
||||
return getPromise('b.json'); // 继续请求 b
|
||||
},
|
||||
(err) => {
|
||||
// a 请求失败
|
||||
console.log('a: err');
|
||||
// 【重要】即使 a 请求失败，也依然继续执行 b请求
|
||||
return getPromise('b.json');
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
// b 请求成功
|
||||
console.log(res);
|
||||
return getPromise('c.json'); // 继续请求 c
|
||||
})
|
||||
.then((res) => {
|
||||
// c 请求成功
|
||||
console.log('c：success');
|
||||
});
|
||||
```
|
||||
|
||||
跟例 1 相比，例 2 在 reject 中增加了一行`return getPromise('b.json')`，意味着，即使 a 请求失败，也要继续执行 b。
|
||||
|
||||
这段代码，我们是单独处理了 a 请求失败的情况。
|
||||
|
||||
### 统一处理 reject
|
||||
|
||||
针对 a、b、c 这三个请求，不管哪个请求失败，我都希望做统一处理。这种代码要怎么写呢?我们可以在最后面写一个 catch。
|
||||
|
||||
代码举例如下：
|
||||
|
||||
```js
|
||||
getPromise('a.json')
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
return getPromise('b.json'); // 继续请求 b
|
||||
})
|
||||
.then((res) => {
|
||||
// b 请求成功
|
||||
console.log(res);
|
||||
return getPromise('c.json'); // 继续请求 c
|
||||
})
|
||||
.then((res) => {
|
||||
// c 请求成功
|
||||
console.log('c：success');
|
||||
})
|
||||
.catch((err) => {
|
||||
// 统一处理请求失败
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
上面的代码中，由于是统一处理多个请求的异常，所以**只要有一个请求失败了，就会马上走到 catch**，剩下的请求就不会继续执行了。比如说：
|
||||
|
||||
- a 请求失败：然后会走到 catch，不执行 b 和 c
|
||||
|
||||
- a 请求成功，b 请求失败：然后会走到 catch，不执行 c。
|
||||
|
||||
## return 的返回值
|
||||
|
||||
return 后面的返回值，有两种情况：
|
||||
|
||||
- 情况 1：返回 Promise 实例对象。返回的该实例对象会调用下一个 then。
|
||||
|
||||
- 情况 2：返回普通值。返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值。
|
||||
|
||||
我们针对上面这两种情况，详细解释一下。
|
||||
|
||||
### 情况 1：返回 Promise 实例对象
|
||||
|
||||
举例如下：
|
||||
|
||||
```js
|
||||
getPromise('a.json')
|
||||
.then((res) => {
|
||||
// a 请求成功。从 resolve 获取正常结果：接口请求成功后，打印a接口的返回结果
|
||||
console.log(res);
|
||||
// 这里的 return，返回的是 Promise 实例对象
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve('qianguyihao');
|
||||
});
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
```
|
||||
|
||||
### 情况 2：返回 普通值
|
||||
|
||||
```js
|
||||
getPromise('a.json')
|
||||
.then((res) => {
|
||||
// a 请求成功。从 resolve 获取正常结果：接口请求成功后，打印a接口的返回结果
|
||||
console.log(res);
|
||||
// 返回普通值
|
||||
return 'qianguyihao';
|
||||
})
|
||||
/*
|
||||
既然上方代码并没有返回 promise，那么，这里的 then 是谁来调用呢？
|
||||
答案是：这里会产生一个新的 默认的 promise实例，来调用这里的then，确保可以继续进行链式操作。
|
||||
*/
|
||||
.then((res2) => {
|
||||
// 这里的 res2 接收的是 普通值 'qianguyihao'
|
||||
console.log(res2);
|
||||
});
|
||||
```
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
463
06-JavaScript异步编程：Ajax和Promise/07-Promise的静态方法.md
Normal file
463
06-JavaScript异步编程：Ajax和Promise/07-Promise的静态方法.md
Normal file
@@ -0,0 +1,463 @@
|
||||
## Promise 的常用 API 分类
|
||||
|
||||
### Promise 的实例方法
|
||||
|
||||
**实例方法**：我们需要先 new 一个 promise 实例对象，然后通过 promise 对象去调用 `then`、`catch`、`finally`方法。这几个方法就是 Promise 的实例方法。
|
||||
|
||||
Promise 的自带 API 提供了如下实例方法：
|
||||
|
||||
- promise.then()：获取异步任务的正常结果。
|
||||
|
||||
- promise.catch()：获取异步任务的异常结果。
|
||||
|
||||
- promise.finaly()：异步任务无论成功与否，都会执行。
|
||||
|
||||
### Promise 的静态方法
|
||||
|
||||
**静态方法**：可以直接通过大写的`Promise.xxx`调用的方法。这里的`xxx`就称之为静态方法。
|
||||
|
||||
Promise 的自带 API 提供了如下静态方法：
|
||||
|
||||
- `Promise.resolve()`
|
||||
|
||||
- `Promise.reject()`
|
||||
|
||||
- `Promsie.all()`：并发处理多个异步任务，所有任务都执行成功，才算成功（走到 resolve）；只要有一个失败，就会走到 reject，整体都算失败。
|
||||
|
||||
- `Promise.race()`：并发处理多个异步任务，返回的是第一个执行完成的 promise，且状态和第一个完成的任务状态保持一致。
|
||||
|
||||
前面的几篇文章，讲的都是 Promise 的**实例方法**；今天这篇文章，我们来详细讲一下 Promise 的**静态方法**。
|
||||
|
||||
## Promise.resolve() 和 Promise.reject()
|
||||
|
||||
当我们在定义一个 promise 的过程中，如果涉及到异步操作，那就需要通过`new Promise`的方式创建一个 Promise 实例。
|
||||
|
||||
但有些场景下，我们并没有异步操作，但**仍然想调用 promise.then**，此时，我们可以用 `Promise.resolve()` 将其包装成成功的状态。同理，`Promise.reject()`可以包装成失败的状态。
|
||||
|
||||
比如说，有的时候，promise 里面并不涉及异步操作，我只是**单纯地想通过 promise 对象返回一个字符串**（有的业务就是有这样的需求），那就可以通过 `Promise.reslove('字符串')` `Promise.reject('字符串')` 、这种**简写**的方式返回。
|
||||
|
||||
这两种情况，我们来对比看看。
|
||||
|
||||
例 1：
|
||||
|
||||
```js
|
||||
function foo(flag) {
|
||||
if (flag) {
|
||||
return new Promise((resolve) => {
|
||||
// 这里可以做异步操作
|
||||
resolve('success');
|
||||
});
|
||||
|
||||
// return Promise.resolve('success2');
|
||||
} else {
|
||||
return new Promise((reslove, reject) => {
|
||||
// 这里可以做异步操作
|
||||
reject('fail');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 执行 reslove 的逻辑
|
||||
foo(true).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
|
||||
// 执行 reject 的逻辑
|
||||
foo(false).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
例 2：（见证奇迹的时刻）
|
||||
|
||||
```js
|
||||
function foo(flag) {
|
||||
if (flag) {
|
||||
// Promise的静态方法：直接返回字符串
|
||||
return Promise.resolve('success');
|
||||
} else {
|
||||
// Promise的静态方法：直接返回字符串
|
||||
return Promise.reject('fail');
|
||||
}
|
||||
}
|
||||
|
||||
// 执行 reslove 的逻辑
|
||||
foo(true).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
|
||||
// 执行 reject 的逻辑
|
||||
foo(false).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
例 1 和例 2 的打印结果是一样的。这两段代码的区别在于：例 1 里面可以封装异步任务；例 2 只能单纯的返回一个字符串等变量，不能封装异步任务。
|
||||
|
||||
## Promise.all()
|
||||
|
||||
`Promsie.all([p1, p2, p3])`：并发处理多个异步任务，所有任务都执行成功，才算成功（才会走到 then）；只要有一个任务失败，就会马上走到 catch，整体都算失败。参数里传的是 多个 promise 实例组成的数组。
|
||||
|
||||
### 语法举例
|
||||
|
||||
**1、异步任务都执行成功时**：
|
||||
|
||||
```js
|
||||
const promise1 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise1');
|
||||
resolve('promise 1 成功');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const promise2 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise2');
|
||||
resolve('promise 2 成功');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const promise3 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise3');
|
||||
resolve('promise 3 成功');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
Promise.all([promise1, promise2, promise3])
|
||||
.then((res) => {
|
||||
// 三个异步任务都执行成功，才会走到这里
|
||||
// 这里拿到的 res，是三个成功的返回结果组成的数组
|
||||
console.log(JSON.stringify(res));
|
||||
})
|
||||
.catch((err) => {
|
||||
// 只要有一个异步任务执行失败，就会马上走到这里
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```js
|
||||
// 1秒后
|
||||
执行 promise1
|
||||
|
||||
// 2秒后
|
||||
执行 promise2
|
||||
|
||||
// 3秒后
|
||||
执行 promise3
|
||||
["promise 1 成功","promise 2 成功","promise 3 成功"]
|
||||
```
|
||||
|
||||
**2、异步任务有至少一个执行失败时**：
|
||||
|
||||
```js
|
||||
const promise1 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise1');
|
||||
resolve('promise 1 成功');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const promise2 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise2');
|
||||
// 这里通过 reject() 的方式，表示任务执行失败
|
||||
reject('promise 2 失败');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const promise3 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise3');
|
||||
resolve('promise 3 成功');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
Promise.all([promise1, promise2, promise3])
|
||||
.then((res) => {
|
||||
// 三个异步任务都执行成功，才会走到这里
|
||||
console.log('走到 then:' + JSON.stringify(res));
|
||||
})
|
||||
.catch((err) => {
|
||||
// 只要有一个异步任务执行失败，就会马上走到这里
|
||||
console.log('走到 catch:' + err);
|
||||
});
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```js
|
||||
// 1秒后
|
||||
执行 promise1
|
||||
|
||||
// 2秒后
|
||||
执行 promise2
|
||||
走到 catch:promise 2 失败
|
||||
|
||||
// 3秒后
|
||||
执行 promise3
|
||||
```
|
||||
|
||||
可以看到，当 promise2 执行失败之后，马上就走到了 catch，而且 promise3 里的 resolve 并没有执行。
|
||||
|
||||
### Promise.all()举例：多张图片上传
|
||||
|
||||
比如说，现在有一个**图片上传**的接口，每次请求接口时只能上传一张图片。需求是：当用户连续上传完九张图片（正好凑齐九宫格）之后，给用户一个“上传成功”的提示。这个时候，我们就可以使用`Promsie.all()`。
|
||||
|
||||
代码举例如下：
|
||||
|
||||
```js
|
||||
const imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg'];
|
||||
const promiseArr = [];
|
||||
imgArr.forEach((item) => {
|
||||
const p = new Promise((resolve, reject) => {
|
||||
// 在这里做图片上传的异步任务。图片上传成功后，接口会返回图片的 url 地址
|
||||
// upload img ==> return imgUrl
|
||||
if (imgUrl) {
|
||||
// 单张图片上传完成
|
||||
resolve(imgUrl);
|
||||
} else {
|
||||
reject('单张图片上传失败');
|
||||
}
|
||||
});
|
||||
promiseArr.push(p);
|
||||
});
|
||||
Promise.all(promiseArr).then((res) => {
|
||||
console.log('图片全部上传完成');
|
||||
console.log('九张图片的url地址，组成的数组：' + res);
|
||||
});
|
||||
```
|
||||
|
||||
上面这个例子，在实际的项目开发中，经常遇到，属于高频需求，需要记住并理解。
|
||||
|
||||
当然，实战开发中，在做多张图片上传时，可能是一张一张地单独上传，各自的上传进度相互独立。此时 `Promise.all`便不再适用，这就得具体需求具体分析了。
|
||||
|
||||
## Promise.race()
|
||||
|
||||
`Promise.race([p1, p2, p3])`：并发处理多个异步任务，返回的是第一个执行完成的 promise，且状态和第一个完成的任务状态保持一致。参数里传的是多个 promise 实例组成的数组。
|
||||
|
||||
上面这句话，第一次读时，可能很绕口。我说的再通俗一点：在多个同时执行的异步任务中，先找出哪个异步任务**最先执行完成**（无论是走到 resolve，还是走到 reject，都算执行完成），整体的状态就跟这个任务保持一致。如果这个任务执行成功，那整体就算成功（走到 then）；如果这个任务执行失败，那整体就算失败（走到 catch）。
|
||||
|
||||
`race`的中文翻译，可以理解为“竞赛”。意思是，谁先抢到名额，就认定谁了。无论这个人最终的结局是成功或者失败，整体的结局，都以这个人的结局为准。
|
||||
|
||||
我刚开始学 Promise.race()的时候，误以为它的含义是“只要有一个异步**执行成功**，整体就算成功（走到 then）；所有任务都执行失败，整体才算失败（走到 catch）”。现在想来，真是大错特错，过于懵懂。
|
||||
|
||||
现在我顿悟了，准确来说，Promise.race()强调的是：只要有一个异步任务**执行完成**，整体就是**完成**的。
|
||||
|
||||
我们来看看各种场景的打印结果，便能擦干泪水，继续前行。
|
||||
|
||||
### 语法举例
|
||||
|
||||
**场景 1、所有任务都执行成功时**：
|
||||
|
||||
```js
|
||||
const promise1 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise1');
|
||||
resolve('promise 1 成功');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const promise2 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise2');
|
||||
resolve('promise 2 成功');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const promise3 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise3');
|
||||
resolve('promise 3 成功');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
Promise.race([promise1, promise2, promise3])
|
||||
.then((res) => {
|
||||
// 第一个完成的任务，如果执行失败，就会走到这里
|
||||
// 这里拿到的 res，是第一个成功的 promise 返回的结果，不是数组
|
||||
console.log(JSON.stringify(res));
|
||||
})
|
||||
.catch((err) => {
|
||||
// 第一个完成的任务，如果执行失败，就会走到这里
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```js
|
||||
// 1秒后
|
||||
执行 promise1
|
||||
"promise 1 成功"
|
||||
|
||||
// 2秒后
|
||||
执行 promise2
|
||||
|
||||
// 3秒后
|
||||
执行 promise3
|
||||
```
|
||||
|
||||
**场景 2、第一个任务成功、第二个任务失败时**：
|
||||
|
||||
```js
|
||||
const promise1 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise1');
|
||||
resolve('promise 1 成功');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const promise2 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise2');
|
||||
// 第二个任务执行失败时
|
||||
reject('promise 2 失败');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const promise3 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise3');
|
||||
resolve('promise 3 成功');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
Promise.race([promise1, promise2, promise3])
|
||||
.then((res) => {
|
||||
// 第一个完成的任务，如果执行成功，就会走到这里
|
||||
console.log('走到then:' + res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 第一个完成的任务，如果执行失败，就会走到这里
|
||||
console.log('走到catch:' + err);
|
||||
});
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```js
|
||||
// 1秒后
|
||||
执行 promise1
|
||||
走到then:promise 1 成功
|
||||
|
||||
// 2秒后
|
||||
执行 promise2
|
||||
|
||||
// 3秒后
|
||||
执行 promise3
|
||||
```
|
||||
|
||||
可以看出，场景 2 的打印结果和场景 1 的打印结果，是一样的。因为最新执行完成的任务，是成功的，所以整体会马上走到 then，且整体就算成功。
|
||||
|
||||
**场景 3、第一个任务失败、第二个任务成功时**：
|
||||
|
||||
```js
|
||||
const promise1 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise1');
|
||||
// 第一个任务执行失败时
|
||||
reject('promise 1 失败');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const promise2 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise2');
|
||||
resolve('promise 2 成功');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const promise3 = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
console.log('执行 promise3');
|
||||
resolve('promise 3 成功');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
Promise.race([promise1, promise2, promise3])
|
||||
.then((res) => {
|
||||
// 第一个完成的任务，如果执行成功，就会走到这里
|
||||
console.log('走到then:' + res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 第一个完成的任务，如果执行失败，就会走到这里
|
||||
console.log('走到catch:' + err);
|
||||
});
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```js
|
||||
// 1秒后
|
||||
执行 promise1
|
||||
走到catch：promise 1 失败
|
||||
|
||||
// 2秒后
|
||||
执行 promise2
|
||||
|
||||
// 3秒后
|
||||
执行 promise3
|
||||
```
|
||||
|
||||
看清楚了没？场景 3 的最终打印结果，是走到了 catch；任务 2 和任务 3 里的 resolve，并没有继续执行。
|
||||
|
||||
场景 3 的代码，一定好好好理解。
|
||||
|
||||
### Promise.race()举例
|
||||
|
||||
现在有个需求是这样的：前端需要加载并显示一张图片。如果图片在三秒内加载成功，那就显示图片；如果三秒内没有加载成功，那就按异常处理，前端提示“加载超时”。
|
||||
|
||||
代码实现思路：
|
||||
|
||||
```js
|
||||
function getImg() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let img = new Image();
|
||||
img.onload = function () {
|
||||
// 图片的加载，是异步任务
|
||||
resolve(img);
|
||||
};
|
||||
img.src = 'https://img.smyhvae.com/20200102.png';
|
||||
});
|
||||
}
|
||||
|
||||
function timeout() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 采用 Promise.race()之后，如果 timeout() 的 promise 比 getImg() 的 promise先执行，说明定时器时间到了，那就算超时。整体的最终结果按失败处理。
|
||||
setTimeout(() => {
|
||||
reject('图片加载超时');
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
Promise.race([getImg(), timeout()])
|
||||
.then((res) => {
|
||||
// 图片加载成功
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 图片加载超时
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
如代码注释所述：采用 Promise.race()之后，如果 timeout() 的 promise 比 getImg() 的 promise 先执行，说明定时器时间到了，那就算超时。整体的最终结果按失败处理。
|
||||
|
||||
这个思路很巧妙。
|
||||
|
||||
## 总结
|
||||
|
||||
Promise 不仅能解决嵌套异步任务的**回调地域**问题，也可做多个异步任务的**并发请求**，还可以进行舒适简洁的状态管理。
|
||||
|
||||
Promise 本身不是异步的，但是它可以封装异步任务，并对异步操作进行良好的状态管理，这便是 Promise 的魅力所在。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
71
06-JavaScript异步编程：Ajax和Promise/08-Async Await函数详解.md
Normal file
71
06-JavaScript异步编程：Ajax和Promise/08-Async Await函数详解.md
Normal file
@@ -0,0 +1,71 @@
|
||||
|
||||
|
||||
## async/await （异步函数）概述
|
||||
|
||||
async/await 是在 ES8(即ES 2017）中引入的新语法，是另外一种异步编程解决方案。
|
||||
|
||||
本质： Generator 的语法糖。
|
||||
|
||||
- async 的返回值是 Promise 实例对象。
|
||||
|
||||
- await 可以得到异步结果。
|
||||
|
||||
我们在普通的函数前面加上 async 关键字，就成了 async 函数。
|
||||
|
||||
## async/await 的基本用法
|
||||
|
||||
async 后面可以跟一个 Promise 实例对象。代码举例如下：
|
||||
|
||||
```javascript
|
||||
const request1 = function() {
|
||||
const promise = new Promise(resolve => {
|
||||
request('https://www.baidu.com', function(response) {
|
||||
if (response.retCode == 200) {
|
||||
// 这里的 response 是接口1的返回结果
|
||||
resolve('request1 success'+ response);
|
||||
} else {
|
||||
reject('接口请求失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return promise;
|
||||
};
|
||||
|
||||
async function queryData() {
|
||||
const response = await request1();
|
||||
});
|
||||
return response;
|
||||
}
|
||||
queryData().then(data => {
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 基于 async/await 处理多次 Ajax 请求【重要】
|
||||
|
||||
实际开发中，现在有三个网络请求，请求2必须依赖请求1的结果，请求3必须依赖请求2的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。
|
||||
|
||||
这种场景其实就是接口的多层嵌套调用。之前学过 Promise，它可以把原本的**多层嵌套调用**改进为**链式调用**。
|
||||
|
||||
而今天要学习的 async/await ，可以把原本的“多层嵌套调用”改成类似于同步的写法，非常优雅。
|
||||
|
||||
代码举例：
|
||||
|
||||
暂略。
|
||||
|
||||
|
||||
### Promise、async...await、Generator的对比
|
||||
|
||||
我们在使用 Promise、async...await、Generator 的时候，返回的都是 Promise 的实例。
|
||||
|
||||
如果直接使用 Promise，则需要通过 then 来进行链式调用；如果使用 async...await、Generator，写起来更像同步的代码。
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [js async await 终极异步解决方案](https://www.cnblogs.com/CandyManPing/p/9384104.html)
|
||||
|
||||
- [理解 JavaScript 的 async/await](https://segmentfault.com/a/1190000007535316)
|
||||
|
||||
65
06-JavaScript异步编程：Ajax和Promise/09-宏任务和微任务.md
Normal file
65
06-JavaScript异步编程：Ajax和Promise/09-宏任务和微任务.md
Normal file
@@ -0,0 +1,65 @@
|
||||
## 准备知识
|
||||
|
||||
- 在执行一个 Promise 对象的时候，当走完`resolve();`之后，就会立刻把 `.then()`里面的代码加入到**微任务队列**当中。
|
||||
|
||||
- 任务的一般执行顺序：**同步任务 --> 微任务 --> 宏任务**。
|
||||
|
||||
## 代码举例
|
||||
|
||||
### 举例 1：宏任务和微任务的执行顺序
|
||||
|
||||
```js
|
||||
setTimeout(() => {
|
||||
// 宏任务
|
||||
console.log('setTimeout');
|
||||
}, 0);
|
||||
|
||||
new Promise((resolve, reject) => {
|
||||
resolve();
|
||||
console.log('promise1'); // 同步任务
|
||||
}).then((res) => {
|
||||
// 微任务
|
||||
console.log('promise then');
|
||||
});
|
||||
|
||||
console.log('qianguyihao'); // 同步任务
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
promise1
|
||||
qianguyihao
|
||||
promise then
|
||||
setTimeout
|
||||
```
|
||||
|
||||
上方代码执行的顺序依次是：**同步任务 --> 微任务 --> 宏任务**。
|
||||
|
||||
### 举例 2：宏任务和微任务的嵌套
|
||||
|
||||
```js
|
||||
new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
console.log('setTimeout');
|
||||
}, 0);
|
||||
console.log('promise1');
|
||||
}).then((res) => {
|
||||
// 微任务
|
||||
console.log('promise then');
|
||||
});
|
||||
|
||||
console.log('qianguyihao');
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
promise1
|
||||
qianguyihao
|
||||
setTimeout
|
||||
promise then
|
||||
```
|
||||
|
||||
上方代码解释：在执行宏任务的**过程中**，创建了一个微任务。但是需要**先把当前这个宏任务执行完**，再去轮询异步任务的队列，进而执行微任务。
|
||||
235
06-JavaScript异步编程：Ajax和Promise/函数封装-Ajax发送http请求（get&post）.md
Normal file
235
06-JavaScript异步编程：Ajax和Promise/函数封装-Ajax发送http请求（get&post）.md
Normal file
@@ -0,0 +1,235 @@
|
||||
|
||||
|
||||
|
||||
## 函数封装
|
||||
|
||||
ajax_tool.js：
|
||||
|
||||
```javascript
|
||||
// 方法：ajax get 五部曲
|
||||
function ajax_get(url,data) {
|
||||
// 异步对象
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
// url 方法
|
||||
// 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18
|
||||
// 所以 这里 需要拼接 url
|
||||
if (data) {
|
||||
// 如果有值 需要拼接字符串
|
||||
// 拼接为xxx.php?name=jack&age=18
|
||||
url+='?';
|
||||
url+=data;
|
||||
}else{
|
||||
}
|
||||
|
||||
ajax.open('get',url);
|
||||
// 发送
|
||||
ajax.send();
|
||||
|
||||
// 注册事件
|
||||
ajax.onreadystatechange = function () {
|
||||
// 在事件中 获取数据 并修改界面显示
|
||||
if (ajax.readyState==4&& ajax.status==200) {
|
||||
console.log(ajax.responseText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 方法：ajax_post五部曲
|
||||
function ajax_post(url,data) {
|
||||
// 异步对象
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
// url 方法
|
||||
ajax.open('post',url);
|
||||
|
||||
// 设置 请求报文
|
||||
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
|
||||
|
||||
// 发送
|
||||
if (data) {
|
||||
// 如果 有值 post请求 是在 send中 发送给服务器
|
||||
ajax.send(data);
|
||||
}else{
|
||||
ajax.send();
|
||||
}
|
||||
|
||||
|
||||
// 注册事件
|
||||
ajax.onreadystatechange = function () {
|
||||
// 在事件中 获取数据 并修改界面显示
|
||||
if (ajax.readyState==4&&ajax.status==200) {
|
||||
console.log(ajax.responseText);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 方法：将 get 跟post 封装到一起
|
||||
/*
|
||||
参数1:url
|
||||
参数2:数据
|
||||
参数3:请求的方法
|
||||
参数4:数据成功获取以后，调用的方法
|
||||
*/
|
||||
function ajax_tool(url,data,method,success) {
|
||||
// 异步对象
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
// get 跟post 需要分别写不同的代码
|
||||
if (method=='get') {
|
||||
// get请求
|
||||
if (data) {
|
||||
// 如果有值
|
||||
url+='?';
|
||||
url+=data;
|
||||
}else{
|
||||
|
||||
}
|
||||
// 设置 方法 以及 url
|
||||
ajax.open(method,url);
|
||||
|
||||
// send即可
|
||||
ajax.send();
|
||||
}else{
|
||||
// post请求
|
||||
// post请求 url 是不需要改变
|
||||
ajax.open(method,url);
|
||||
|
||||
// 需要设置请求报文
|
||||
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
|
||||
|
||||
// 判断data send发送数据
|
||||
if (data) {
|
||||
// 如果有值 从send发送
|
||||
ajax.send(data);
|
||||
}else{
|
||||
// 木有值 直接发送即可
|
||||
ajax.send();
|
||||
}
|
||||
}
|
||||
|
||||
// 注册事件
|
||||
ajax.onreadystatechange = function () {
|
||||
// 在事件中 获取数据 并修改界面显示
|
||||
if (ajax.readyState==4&&ajax.status==200) {
|
||||
// console.log(ajax.responseText);
|
||||
|
||||
// 将 数据 让 外面可以使用
|
||||
// return ajax.responseText;
|
||||
|
||||
// 当 onreadystatechange 调用时 说明 数据回来了
|
||||
// ajax.responseText;
|
||||
|
||||
// 数据成功获取以后，执行方法success()。
|
||||
//我们把获取的数据作为 success()的参数，意思是：
|
||||
//success方法是外面的，数据是里面给的。那数据就变相地传递到了外面去【重要】
|
||||
success(ajax.responseText);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 函数调用（get方法）
|
||||
|
||||
test_get.html:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="测试get" id='ajax_get'>
|
||||
</body>
|
||||
</html>
|
||||
<!-- 导入 封装的js -->
|
||||
<script type="text/javascript" src='ajax_tool.js'></script>
|
||||
<script type="text/javascript">
|
||||
document.querySelector('#ajax_get').onclick = function () {
|
||||
// 直接使用 封装的 工具函数即可
|
||||
/*
|
||||
参数1:url
|
||||
参数2:数据
|
||||
参数3:请求的方法
|
||||
参数4：请求成功后，调用的方法
|
||||
*/
|
||||
var backData = ajax_tool('test_get.php','name=smyhvae&skill=code','get',function(data){
|
||||
console.log(data);
|
||||
});
|
||||
// 测试
|
||||
console.log(backData);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
test_get.php：
|
||||
|
||||
|
||||
```php
|
||||
<?php
|
||||
// 获取get提交的数据
|
||||
echo $_GET['skill'];
|
||||
?>
|
||||
```
|
||||
|
||||
## 函数调用（post方法）
|
||||
|
||||
test_post.html：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="测试post" id='ajax_post'>
|
||||
</body>
|
||||
</html>
|
||||
<!-- 导入 封装的js -->
|
||||
<script type="text/javascript" src='ajax_tool.js'></script>
|
||||
<script type="text/javascript">
|
||||
document.querySelector('#ajax_post').onclick = function () {
|
||||
// 直接使用 封装的 工具函数即可
|
||||
/*
|
||||
参数1:url
|
||||
参数2:数据
|
||||
参数3:请求的方法
|
||||
参数4:数据获取成功调用的方法
|
||||
*/
|
||||
var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
|
||||
console.log(data);
|
||||
});
|
||||
// 测试
|
||||
console.log(backData);
|
||||
|
||||
|
||||
// 怎么样 处理数据 全部写在 匿名函数中
|
||||
ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
|
||||
console.log(data);
|
||||
// 修改页面的显示呢?
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
test_post.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
echo $_POST['friend'];
|
||||
?>
|
||||
|
||||
```
|
||||
128
06-JavaScript异步编程：Ajax和Promise/模板引擎.md
Normal file
128
06-JavaScript异步编程：Ajax和Promise/模板引擎.md
Normal file
@@ -0,0 +1,128 @@
|
||||
|
||||
|
||||
## 模版引擎
|
||||
|
||||
### 引入
|
||||
|
||||
我们在使用ajax请求数据时，返回的如果是一个 JSON 格式的字符串，我们需要将其包装到对应的HTML代码中，再添加到页面上，才能看到效果。那么这个包装得过程有没有简单的方法呢?
|
||||
|
||||
|
||||
假设在 js 中有如下数据：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var obj = {
|
||||
name:"fox",
|
||||
age:18,
|
||||
skill:"卖萌"
|
||||
};
|
||||
```
|
||||
|
||||
希望包装为:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>姓名:fox</li>
|
||||
<li>年龄:18</li>
|
||||
<li>爱好:卖萌</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
我们可以通过模板插件来实现。
|
||||
|
||||
### 模版插件的原理
|
||||
|
||||
我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?
|
||||
|
||||
### 常见的模板引擎
|
||||
|
||||
- BaiduTemplate(百度开发)
|
||||
|
||||
- ArtTemplate(腾讯开发)：[GitHub地址](https://github.com/aui/art-template)、[文档地址](https://aui.github.io/art-template/zh-cn/docs/)。
|
||||
|
||||
- velocity.js(淘宝开发)
|
||||
|
||||
- Handlebars
|
||||
|
||||
|
||||
## ArtTemplate
|
||||
|
||||
|
||||
标准语法：
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
{{if user}}
|
||||
<h2>{{user.name}}</h2>
|
||||
{{/if}}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
渲染模板：
|
||||
|
||||
|
||||
```javascript
|
||||
var data = {
|
||||
title: `标签`,
|
||||
list: [`文艺`, `博客`, `摄影`]
|
||||
};
|
||||
var html = template(`test`, data);
|
||||
document.getElementById(`content`).innerHTML = html;
|
||||
```
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<script src="js/template-native-debug.js"></script>
|
||||
<script src="js/jquery-2.2.0.js"></script>
|
||||
|
||||
<script id="tpl" type="text/html">
|
||||
<h3><%= className %></h3>
|
||||
<ul>
|
||||
<% for(var i = 0; i< students.length;i++) { %>
|
||||
<li><%= i+1 %>. <%= students[i] %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var data = {
|
||||
className:"前端1期",
|
||||
students:["张飞","刘备","诸葛亮","甄姬","小乔","汪汪"]
|
||||
};
|
||||
|
||||
$(function (){
|
||||
var html = template("tpl",data);
|
||||
$("#demo").html(html);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user