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)
    })
1
2
3
4
5
6

实现如下：

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>Documenttitle>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

在这里插入图片描述

then 方法

第一个参数是 resolve 回调函数
第二个参数是 reject 的状态回调函数，可选
返回一个新的 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)
    });
1
2
3
4
5
6
7

在这里插入图片描述

分开就能开到 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)
});
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

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

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)
    });
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

相关阅读:
请求分页内存管理模式
async await 原理解析之爱上 async/await
python烟花代码通过编写程序来模拟烟花的绽放过程
重上吹麻滩——段芝堂创始人翟立冬游记
15.NAT实验
计算机组成原理——系统总线
数字孪生是什么？以山海鲸智慧园区三维可视化系统为例说明
数据、结构、数据结构之间的关系
设计模式学习笔记（九）桥接模式及其应用
Principle of the Hardware-in-the-Loop (HIL)

原文地址：https://blog.csdn.net/kaimo313/article/details/125858195