promise对象，generator函数，await异步函数发送ajax请求

最新推荐文章于 2024-01-02 16:15:02 发布

不知道用哪个昵称

最新推荐文章于 2024-01-02 16:15:02 发布

阅读量963

点赞数

首先对了解ajax的四个步骤

var xhr=new XMLHttpRequest();//第一步
xhr.addEventListener("readystatechange",loadHandler);//第二步，侦听事件，准备状态事件改变时
xhr.open("POST",url);或者xhr.open("GET",url);//第三步，打开
xhr.send(encodeURIComponent(JSON.stringify(obj)));//第四步，发送，将对象转换为字符串，并转换为可识别的字符串

promise对象

这里写图片描述
promise对象可以将异步操作以同步形式表达出来，有效避免回调地狱。
在ES6中promise是作为构造函数使用，用来生成promise实例。

promise对象的使用步骤

1、对promise对象的创建

 let promise = new Promise((resolve, reject) => {
      //执行异步操作
      if(异步操作成功) {
        resolve(value);
      } else {
        reject(errMsg);
      }
    })

2、对promise中then的调用

    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))

promise对象的3个状态
pending: 初始化状态
fullfilled: 成功状态
rejected: 失败状态

使用promise封装处理ajax请求

function getAjax(url){
    return new Promise((resolve,reject)=>{//创建promise对象
        let xhr = new XMLHttpRequest();//创建ajax第一步
        xhr.onreadystatechange=function(){//相当于ajax第二步，每当readyState 改变时,就会触发 onreadystatechange 事件。
            if(xhr.readyState === 4){//如果准备状态等于4，代表接收到响应数据状态
                if(xhr.status===200){//接收状态为成功时
                    let text = xhr.responseText;//定义text
                    let data = JSON.parse(text);//定义data将字符串转化为对象
                        resolve(data);//成功返回data
                        }else{
                            reject("ajax请求发送失败");//错误返回“ajax请求失败”
                        }
                    }
                };
                xhr.open("get",url);//ajax第三步
                xhr.send();//ajax第四步
            });
        }

        getAjax("http://localhost:3001/news?id=1")//给getAjax赋予变量
        .then((data)=>{//对promise中then的调用
            //对评论内容发起请求
                if(data.commentsUrl){
                    return getAjax(`http:\/\/localhost:3000${data.commentsUrl}`)
                }
        },(errorInfo)=>{
            console.error(errorInfo);
            return new Promise(()=>{});
        })
        .then((data)=>{
            console.log(data);
        },(errorInfo)=>{
            console.error(errorInfo);
        });

generator函数

function* (function关键字后跟一个星号）定义生成器函数 (generator function)，它返回一个 Generator(生成器) 对象。生成器对象符合可迭代协议和迭代器协议。
yield关键字使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器对象的next方法。
yield关键字实际返回了一个IteratorResult对象，它有两个属性，value和done。
value属性是对yield表达式求值的结果，而done是false，表示生成器函数尚未完全完成
一旦遇到 yield 表达式，生成器的代码将被暂停运行，直到生成器的 next() 方法被调用。每次调用生成器的next()方法时，生成器都会恢复执行,如果将可选值传递给生成器的next()方法，则该值将成为生成器当前yield启动时返回的值。

在yield表达式暂停,执行yield表达式
从yield表达式启动,执行yield表达式之后的代码
next方法中第一个参数的值给谁?
看这个next方法在哪一个yield表达式上启动!!!
next方法的返回值是什么?
看这个next方法在哪一个yield表达式暂停!!!

使用generator函数处理ajax请求

function getAjax(url){
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        let jsonStr = xhr.responseText;
                        let data = JSON.parse(jsonStr);
                        genNews.next(data);
                    }else{                      
                    }
                }
            }
            xhr.open("get",url);
            xhr.send();
            return "getAjax";
        }       
        function * news(){
            //data 新闻信息
            let data = yield getAjax("http://localhost:3000/news?id=1");
            //data2 评论的信息
            let data2 =  yield getAjax(`http:\/\/localhost:3000${data.commentsUrl}`);
            console.log(data2)
        }       
        let genNews =  news();      
        console.log(genNews.next())

await异步函数

当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。
若 Promise 正常处理(fulfilled)，!!其回调的resolve函数参数作为 await 表达式的值!!，继续执行 async function。
若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。

使用await异步函数处理ajax请求

function getAjax(url){
            return new Promise((resolve,reject)=>{
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState === 4){
                        if(xhr.status===200){
                            let text = xhr.responseText;
                            let data = JSON.parse(text);
                            resolve(data);
                        }else{
                            reject("ajax请求发送失败");
                        }
                    }
                };
                xhr.open("get",url);
                xhr.send();
            });
        }
           async function test(){
                let data = await getAjax("http://localhost:3000/news?id=1");
                let data2 = await getAjax(`http:\/\/localhost:3000${data.commentsUrl}`);
                console.log(data2)
           }
        test();