ES6_06_promise对象

promise对象：

1. 理解:
* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):
* 创建promise对象
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
* 调用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
3. promise对象的3个状态
* pending: 初始化状态
* fullfilled: 成功状态
* rejected: 失败状态
4. 应用:
* 使用promise实现超时处理

* 使用promise封装处理ajax请求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();

如图：

 

简单举例：

 

//创建promise对象
let promise = new Promise ((resolve, reject) => {
//初始化promise状态： pending：初始化
console.log('111');
//执行异步操作,通常是发送ajax请求，开启定时器
setTimeout.log(() => {
console.log('333');
//根据异步任务的返回结果来去修改promise的状态
//异步任务执行成功
resolve('哈哈哈'); //修改promise的状态为 fullfilled ：成功状态
//异步任务执行失败
//reject('嘤嘤嘤'); //修改promise的状态为 rejected ：失败状态
},2000)

})
console.log('222');
promise
.then((data) => { //成功的回调
console.log(data,'成功了。。。');
},(error) =>{ //失败的回调
console.log(error,'失败了。。。');
})

 

 

通过具体操作完成：

首先：安装FE插件，打开routes的index.js，index代码如下：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    res.render('index', {title: 'Express'});
});

router.get('/news', function (req, res, next) {
    res.set('Access-Control-Allow-Origin', '*');
    var id = req.query.id;
    console.log('/news id='+id);
    var news = {
        id: id,
        title: 'news title1...',
        content: 'news content1...',
        commentsUrl: '/comments?newsId='+id
    };
    res.json(news);
});


router.get('/comments', function (req, res, next) {
    res.set('Access-Control-Allow-Origin', '*');
    console.log('/comments newsId=' + req.query.newsId);
    var newsId = req.query.newsId;
    var comments = [
        {
            id: 1,
            content: 'comment content1111...',
            newsId : newsId
        },
        {
            id: 2,
            content: 'comment content2222...',
            newsId : newsId
        }];
    res.json(comments);
});

module.exports = router;

会得到：

http://localhost:3000/news

例：

<script type="text/javascript">
    //定义获取新闻的功能函数
    function getNews() {
        let promise = new Promise((resolve ,reject) => {
            //状态： 初始化
            //执行异步任务
            //创建xmlHttp实例对象
            let xmlHttp = new XMLHttpRequest();
            //绑定监听 readyState
            xmlHttp.onreadystatechange = function () {
                if(xmlHttp.readyState == 4) {
                    if(xmlHttp.status == 200){//请求成功
                        console.log(xmlHttp.responseText);
                        //修改状态
                        resolve(); //修改promise的状态为成功的状态
                    }else { //请求失败
                        reject('暂时没有新闻内容');
                }
                }
            };

            //open设置请求的方法以及url
            xmlHttp.open('GET',url);
            //发送
            xmlHttp.send();

        } )
        return promise;
    }
    getNews('http://localhost:3000/news?id=2')
       .then((data) => {
           console.log(data);
           //发送请求获取评论内容准备url
           let commentsUrl = JSON.parse(data).commentsUrl
           let url = 'http://localhost:3000/comments?newsId=undefind' + commentsUrl;
           //发送请求；
           getNews(url);
       },(error) => {
           console.log(error);

    })
        //不会执行第二次请求，失败会执行error，promise解决回调关系
    .then((data) => {
        console.log(data);
    },() => {

    })
</script>