promise原生

    <script>
        let xhr = new XMLHttpRequest();
        //第一步创建xhr对象
        xhr.open("get", "./data.json", true);
        //第二步：设置请求的基本信息 如果是post请求在这里要设置一个头信息
        // get方式传参是在路径后面？ 拼接 而post是在send里传
        // 第三个参数 可以控制异步同步 true就是异步

        xhr.send();
        //第三步：向服务器发送链接
        // xhr.onreadystatechange = function() {
        //     console.log(xhr.readyState);
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         console.log(xhr.responseText);
        //     }
        // };
        // 第四步 在xhr对象和服务器都响应成功的时候拿到数据
        // 可以用onreadystatechange 事件这个事件的意思是 只要xhr的状态发生改变就会触发 需要判断xhr的状态为4 服务器的状态为200 就代表都准备好了 我们就可以拿到数据了
        // 也可以用下面的onload事件代替 onload本身就代表xhr对象已经准备好了 所以我们只需要判断服务器的状态是200就可以拿到数据了

        // responseText就是拿到的数据
        xhr.onload = () => {
            if (xhr.status == 200) {
                // console.log(xhr.responseText);
            } else {}
        };
        //onload事件在js中是加载完成

        // 把上面的原生js请求ajax的普通写法变成promise的写法

        function js_ajax(params) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open(params.method, params.url, true);
                xhr.send();
                xhr.onload = () => {
                    if (xhr.status == 200) {
                        let res = JSON.parse(xhr.responseText);
                        resolve(res);
                    } else {
                        reject("请求失败");
                    }
                };
            });
        }
        //把异步请求放进promise容器中 就变成一种promise的写法 then就执行成功的resolve回调cathc就执行失败的reject回调
        js_ajax({
                method: "get",
                url: "./data.json",
            })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
    </script>