0
点赞
收藏
分享

微信扫一扫

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,) => {
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>

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

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

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

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

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

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

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_html_04


举报

相关推荐

0 条评论