ES6 从入门到精通 # 18:使用 Promise 封装 ajax

简介: ES6 从入门到精通 # 18:使用 Promise 封装 ajax

说明

ES6 从入门到精通系列(全23讲)学习笔记。



封装 ajax

封装一个方法 getData 去请求接口,请求方式如下

getData("https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州")
    .then(res => {
        console.log(res)
    }, err => {
        console.log(err)
    })


实现如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const getData = function(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.onreadystatechange = handler;
                xhr.responseType = "json";
                xhr.setRequestHeader("Accept", "application/json");
                xhr.send();
                function handler() {
                    console.log(this);
                    if(this.readyState === 4) {
                        if(this.status === 200) {
                            resolve(this.response);
                        }else{
                            reject(new Error(this.statusText));
                        }
                    }
                }
            })
        }
        getData("https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州")
            .then(res => {
                console.log(res)
            }, err => {
                console.log(err)
            })
    </script>
</body>
</html>


59cfcddc8e04412a8d46c6f9feea7c6e.png


then 方法


then 方法


  1. 第一个参数是 resolve 回调函数
  2. 第二个参数是 reject 的状态回调函数,可选
  3. 返回一个新的 promise 实例,可以采用链式编程


比如:

getData("https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州")
    .then(res => {
        console.log(res)
        return res.data
    }).then(obj => {
        console.log(obj)
    });

971a45f09ced4603b6356f76f893de48.png


分开就能开到 kaimo 是个 Promise

const kaimo = getData("https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州")
    .then(res => {
        console.log(res)
        return res.data
    });
console.log(kaimo)
kaimo.then(obj => {
    console.log(obj)
});


8c618455bc5c4dba8dab1c5b22742dbf.png


另外下面两种是一样的:先改动一下接口,让其报错

getData("https://v0.yiketianqi1.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州")
    .then(res => {
        console.log(res)
    }).then(null, err => {
        console.log(err)
    });
getData("https://v0.yiketianqi1.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州")
    .then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    });

d448f798f7b24d3a98f4a700e1ff6024.png



目录
相关文章
|
1月前
|
前端开发
理解 ES6 中的 Promise
【10月更文挑战第24天】ES6 中的 Promise 是一种用于处理异步操作的机制,它提供了一种更优雅、更可控的方式来处理异步任务的结果。Promise 可以看作是对异步操作结果的一种承诺,它可以处于三种不同的状态:Pending(等待中)、Fulfilled(已完成,即成功)和 Rejected(已拒绝,即失败)。
|
2月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
20 1
|
2月前
|
前端开发 Java
说说你对es6中promise的理解?
说说你对es6中promise的理解?
16 1
|
2月前
|
前端开发 Java
说说你对es6中promise的理解?
说说你对es6中promise的理解?
|
3月前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
37 3
|
4月前
|
前端开发
手写实现ES6的Promise.all()和Promise.race()函数
这篇文章介绍了如何手写实现ES6的`Promise.all()`和`Promise.race()`函数,提供了实现这两个Promise聚合函数的详细代码示例,并展示了如何使用它们。
手写实现ES6的Promise.all()和Promise.race()函数
|
2月前
|
存储 前端开发 JavaScript
关于 ES6 中 Promise 的面试题
关于 ES6 中 Promise 的面试题
19 0
|
4月前
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
|
5月前
|
前端开发 JavaScript
ES6 中 Promise对象使用学习
ES6 中 Promise对象使用学习
43 1
|
4月前
|
前端开发 JavaScript
ES6新特性(五):Promise优雅地处理异步
ES6新特性(五):Promise优雅地处理异步