2021-07-26 Promise的定义和使用

1.异步

1.1.异步操作的定义

可以与主程序同时执行的操作

1.2.js常见异步

1.定时器&延时器:setTimeout和setInterval
2.动画:animate
3.网络请求:request

1.3.异步代码的缺点

回调地狱:函数嵌套函数

2.promise初认识

2.1.定义

promise是ES6中引入的一种异步编程解决方案

2.2.语法

var p=new Promise(function(resolve,reject){})

2.3.示例

		//随机数num>5时成功<5时失败,并输出对应的随机数
        var p = new Promise((resolve, reject) => {
            var num = parseInt(Math.random() * 10);
            if (num > 5) {
                resolve(num);
            } else {
                reject(num);
            }
        });
        p.then(data => {
            console.log(data, "s");
        }).catch(data => {
            console.log(data, 'f');
        })

3.promise的状态对于定时器来说是不可逆的

把上例代码套一层定时器

var p = new Promise((resolve, reject) => {
    setInterval(() => {
        var num = parseInt(Math.random() * 10);
        if (num > 5) {
            resolve(num);
        } else {
            reject(num);
        }
    }, 2000);
});

结果:2s后只显示一次

promise的状态对于定时器执行一次后结果只有一个,要么成功要么失败.
即只能对应一个结果且不可逆

4.[重点]promise的常见写法:在函数中return new Promise();

示例

function fn() {
    return new Promise((resolve, reject) => {
        // resolve("success...");
        reject("fail...")
    });
}
fn().then(data => {
    console.log(data, "成功了");
}).catch(data => {
    console.log(data, "失败了");//fail... 失败了
});

5.[重点]promise改造ajax的依赖调用

改造前:Ajax通过GET请求判断用户名是否存在

HTML:

<label for="">用户名:</label>
<input type="text"><span></span><br>
<input type="button" value="Send" id="btn">
<script>
    var span = document.querySelector("span");
    var xhr = new XMLHttpRequest();
    document.getElementById("btn").addEventListener("click", () => {
        xhr.open("GET", "./user.php?user=" + document.querySelectorAll("input")[0].value, true);
        xhr.send();
        xhr.onreadystatechange = callback;
    });

    function callback() {
        if (xhr.readyState == 4 && xhr.status === 200) {
            // console.log(xhr.response);
            if (xhr.responseText == 1) {
                span.style.color = 'red';
                span.innerHTML = '*用户名已存在!';
            }
            if (xhr.responseText == 2) {
                span.style.color = 'green';
                span.innerHTML = '*注册成功!';
            }
        }
    }
</script>

PHP:

<?php
  $user=$_GET['user'];
  $arr=['张三','李四','王五'];
  if(in_array($user,$arr)){
    echo 1;
  }else{
    echo 2;
  }
?>

改造后

HTML:

var span = document.querySelector("span");
document.getElementById("btn").addEventListener("click", fn);
function fn() { //btn点击事件
    return new Promise((resolve, reject) => { //Promise
        var xhr = new XMLHttpRequest(); //创建请求对象
        xhr.open("GET", "./user.php?user=" + document.querySelectorAll("input")[0].value, true); //设置请求
        xhr.send(); //发送请求
        xhr.onreadystatechange = function() { //设置监听
            if (xhr.readyState == 4) {
                if (xhr.status === 200) { //判断服务器状态,是否能响应数据
                    resolve("server connect!"); //服务器状态正常
                    if (xhr.responseText == 1) {
                        span.style.color = 'red';
                        span.innerHTML = '*用户名已存在!';
                    }
                    if (xhr.responseText == 2) {
                        span.style.color = 'green';
                        span.innerHTML = '*注册成功!';
                    }
                } else { //否则reject
                    reject("server error!"); //服务器状态出错
                }
            }
        }
    });
};
fn().then(data => {
    console.log(data, );
}).catch(data => {
    console.log(data);
});