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