Promise发送Ajax请求

840 阅读1分钟

「这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战

AJAX 如何工作

详细内容可以看这里 简单讲一下吧

image.png

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由 JavaScript 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JavaScript 读取响应
  7. 由 JavaScript 执行正确的动作(比如更新页面)

使用Ajax请求

1.创建一个 XMLHttpRequest 对象
2.初始化,用get的方式去访问api.apiopen.top/getJoke 这个API接口
3.发送请求
4.绑定事件,处理响应结果,响应状态码在200-299范围说明成功获取数据,否则返回失败

//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("GET", "https://api.apiopen.top/getJoke");
//3.发送
xhr.send();
//4.绑定事件,处理响应结果
//不用promise方法
xhr.onreadystatechange = function () {
    //判断
    if (xhr.readyState === 4) {
        //判断响应状态码200-299
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response);
        } else {
            //如果失败
            console.error(xhr.status);
        }
    }
}

image.png

Promise 对象

Promise对象的状态

1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:\

  • pending: 初始状态,不是成功或失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。
    2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

Promise 优缺点

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。 Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Promise发送Ajax请求

resolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的

//promise使用
const res=new Promise((reslove,reject)=>{
     //1.创建对象
    const xhr=new XMLHttpRequest();

    //2.初始化
    xhr.open("GET","https://api.apiopen.top/getJoke");

    //3.发送
    xhr.send();

    //4.绑定事件,处理响应结果
    xhr.onreadystatechange=function(){
    //判断
    if(xhr.readyState===4){
        //判断响应状态码200-299
        if(xhr.status>=200 && xhr.status <300){
            reslove(xhr.response);
        }else{
            //如果失败
            reject(xhr.status);
        }
    }
}
})
res.then(function(value){
    console.log(value);
},function(reason){
    console.log(reason);
})

image.png