Promise封装ajax请求

最新推荐文章于 2023-03-26 21:15:07 发布

frontendfairy

最新推荐文章于 2023-03-26 21:15:07 发布

阅读量3.4k

点赞数 4

文章标签： ajax 前端

本文链接：https://blog.csdn.net/weixin_47819656/article/details/120994704

版权

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）Promise一般是包在一个函数中，在需要的时候去运行这个函数。

封装一个函数sendAjax函数，发送GET ajax请求

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject

function sendAjax(url) {
                return new Promise((resolve, reject) => {
                    //  1.创建对象
                    const xhr = new XMLHttpRequest();
                    xhr.responseType = 'json';
                    // 2.初始化设置请求方法(类型)和url
                    xhr.open("GET", "https://api.apiopen.top/getJoke");
                    // 3.发送
                    xhr.send();
                    // 4.绑定事件，onreadystatechange,存储函数（或函数名）处理响应结果(每当 readyState 改变时，就会触发 onreadystatechange 事件,一共会触发 4 次,从 0 到 4)
                    // readyState 属性存有 XMLHttpRequest 的状态信息
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4) {
                            if (xhr.status >= 200 && xhr.status < 300) {
                                resolve(xhr.response);
                            } else {
                                reject(xhr.status);
                            }
                        }
                    }
                })
            }
            sendAjax()
                .then(value => {
                    console.log(value);
                    console.log(sendAjax());
                }, reason => {
                    console.warn(reason);
                })

所谓Pryomise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果; 简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用then的方式执行回调函数,避免了层层嵌套的回调函数。

async与await结合发送Ajax请求

async/await 的优势：可以很好地处理 then 链
async用于申明function异步，await用于等待一个异步方法执行完成

<body>
        <button type="button" id="btn">点击获取段子</button>
        <script type="text/javascript">
        // 封装一个Ajax，相当于axios();
            function sendAjax(url) {
                return new Promise((resolve, reject) => {
                    //  1.创建对象
                    const xhr = new XMLHttpRequest();
                    xhr.responseType = 'json';
                    // 2.初始化设置请求方法(类型)和url
                    xhr.open("GET", "https://api.apiopen.top/getJoke");
                    // 3.发送
                    xhr.send();
                    // 4.绑定事件，onreadystatechange,存储函数（或函数名）处理响应结果(每当 readyState 改变时，就会触发 onreadystatechange 事件,一共会触发 4 次,从 0 到 4)
                    // readyState 属性存有 XMLHttpRequest 的状态信息
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4) {
                            if (xhr.status >= 200 && xhr.status < 300) {
                                resolve(xhr.response);
                            } else {
                                reject(xhr.status);
                            }
                        }
                    }
                })
            }
        // async与await省略了回调函数
            let btn = document.querySelector('#btn');
            btn.addEventListener('click',async function(){
                let duanzi = await sendAjax();
                console.log(duanzi);
            })
            
        </script>
    </body>

async函数的返回值为 promise 对象
await 必须出现在 async 函数内部，不能单独使用,但 async 函数中可以没有 await

await语句后面跟着的promise对象一旦抛出错误，也就是变成reject状态，那么整个async函数就会停止执行,抛出异常.

async function thorwErr() {
  await Promise.reject('出错');
  console.log('执行了吗？'); // 不会执行，以下代码都不会执行
  return await Promise.resolve('成功');
},

thorwErr().then((res) => {
  console.log(res); 
  // 成功，并不会弹出，因为第一句awiat已经抛错，被下面的catch捕获，而且async直接停止执行
}).catch((err) => {
  console.log(err); // 出错
});

// 最后只会输出两个字 出错

4.需要通过 try...catch 捕获处理

async function thorwErr() {
			  try {
			    await Promise.reject('出错');
			  } catch(err) {
			    console.log(err); // 出错
			  }
			  console.log('执行了吗？');
			  return await Promise.resolve('成功');
			}

frontendfairy

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Promise封装ajax请求

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）Promise一般是包在一个函数中，在需要的时候去运行这个函数。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject封装一个函数sendAjax函数，发送GET ajax请求function sendAjax(url) { return new Promise((resolve, reject...
复制链接

扫一扫