zoukankan      html  css  js  c++  java
  • ES6-Promise

        //在es6中Promise是一个函数对象,用它生成对象需要传入一个带有两个参数的函数,这两个参数分别是两个函数代表执行成功和执行失败
        //传入的函数里面可以执行一些异步的操作并监听,监听到该异步操作成功后就调用代表成功的那个参数函数,失败则调用失败的那个参数函数
        //然后在外面就可以用这个Promise对象的状态来判断里面异步操作的执行情况
       
        function getNews(url) {//假如这是一个异步Ajax获取新闻的方法,返回值是一个promise对象,通过返回的对象判断是否成功获取新闻以及内容
            //promise的状态有三种,初始化,成功,失败
            let promise = new Promise((resolve, reject) => {
                //这时状态时初始化
                //执行异步操作
                let xmlHttp = new XMLHttpRequest();
                xmlHttp.open('GET', url);
                xmlHttp.send();
                xmlHttp.onreadystatechange = () => {
                    if (xmlHttp.readyState == 4) {
                        if (xmlHttp.status == 200) {//请求成功
                            let response = xmlHttp.responseText;//获取响应的内容,以文本的方式
                            resolve(response);//调用resolve后promise的状态变为成功,并传入响应结果
                        } else {//请求失败
                            reject(xmlHttp.status);//调用reject后promise的状态变为失败,并传入状态码
                        }
                    }
                };
            });
            return promise;
        }
        let pro = getNews('https://www.baidu.com');
        pro.then(data=>{//promise.then表示当该Promise有结果后调用,里面传入两个函数,分别是成功和失败后调用的函数
            console.log('请求到了新闻内容:'+data);
        },error=>{
            console.log('没有请求到新闻内容,状态码为:'+error);
        })
        //注:使用promise封装异步方法处理结果,和直接调用异步方法在回调函数中处理结果相比,看起来流程更复杂了。但是使用了promise会
        //让逻辑结构更为清楚和好理解,并且回调的嵌套也少了。特别是在方法中有回调函数的时候,我们希望在外面调用这个方法的获取回调函数
        //中的内容时候,如果没有promise,我们很难将异步返回的内容直接作为方法返回值返回,我们就需要传入函数到这个方法中,在方法里面
        //异步执行完后再调用我们传入的函数,比较麻烦。有了promise后我们就可以直接返回一个promise,然后再外面解析这个promise就可以
        //获取到方法里面异步执行的结果和状态。
     
    可以使用Promise.all来并行多个请求,在这些请求都返回结果后再对结果统一处理:
    Promise.all([
    new Promise(resolve,reject)=>{
      setTimeout(()=>{
        resolve('这是第一个请求');
      },1000)
    }),
    Promise(resolve,reject)=>{
      setTimeout(()=>{
        resolve('这是第二个请求');
      },1000)
    })
    ]).then(res=>{//这里的res是一个数组,包含前面两个promise的resolve结果
      console.log('第一个请求结果'+res[0]);
      console.log('第一个请求结果'+res[1]);
    });
  • 相关阅读:
    WPF样式之画刷结合样式
    年度巨献-WPF项目开发过程中WPF小知识点汇总(原创+摘抄)
    30分钟学会XAML
    spring注解之@Import注解的三种使用方式
    大白话讲解Spring的@bean注解
    SpringBoot中的五种对静态资源的映射规则
    Spring注解之@Autowired、@Qualifier、@Resource、@Value
    Spring中如何使用工厂模式实现程序解耦?
    Spring注解之@Component、@Controller、@Service、@Repository
    Spring整合Redis
  • 原文地址:https://www.cnblogs.com/maycpou/p/12335631.html
Copyright © 2011-2022 走看看