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

Posted 凯小默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

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)
    );

分开就能开到 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)
);

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

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)
    );

以上是关于ES6 从入门到精通 # 18:使用 Promise 封装 ajax的主要内容,如果未能解决你的问题,请参考以下文章

ES6 从入门到精通系列学习笔记 23 篇(完结)

ES6 从入门到精通系列学习笔记 23 篇(完结)

ES6 从入门到精通 # 01:ES6 介绍

ES6 从入门到精通 # 03:模板字符串

ES6 从入门到精通 # 03:模板字符串

ES6 从入门到精通 # 17:Promise 的基本使用