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 方法
- 第一个参数是 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)
);
分开就能开到 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的主要内容，如果未能解决你的问题，请参考以下文章