zoukankan      html  css  js  c++  java
  • Promise的基本使用

    一,简介

    • Prpmise到底是什么?

      • Promise是异步编程的一种解决方案(是ES6中一个非常重要且好用的特性)
      • 可一优雅的方式解决回调地狱
    • 什么情况下会用到Promise?

      • 一般情况下是有异步操作,使用Promise对这个异步操作进行封装

    二,基本语法

      // 1.使用setTimeout
        // setTimeout(function() {      
        // },1000)
        
        // 异步操作
        // setTimeout(() => {
        //   console.log('setTimeout');
        // },1000)
    
        //            解决  ,  拒绝 
        // 参数->函数(resolve,reject)
        // resolve,reject 它们本身又是函数
        // 链式编程 
        new Promise((resolve,reject) => {
          // 第一次网络请求的代码
            setTimeout(() => {
              resolve()
          },1000)
        }).then(() => {
    
          // 第一次拿到结果的代码
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          
          return new Promise((resolve,reject) => {
            // 第二次网络请求的代码
            setTimeout(() => {
              resolve()
            },1000)
    
          })
        }).then(() => {
          // 第二次处理的代码
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
    
          return new Promise ((resolve,reject) => {
            // 第三次网络请求的代码
            setTimeout(() => {
              resolve()
            },1000)
          })
        }).then(() => {
          // 第三次处理的代码
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          console.log('Hello World');
          
        })
    
         new Promise((resolve,reject) => {
          setTimeout(() => {
            //成功的时候调用resolve
            // resolve('Hello World')
    
            // 失败的时候调用reject
            reject('error message')
          },1000)
        }).then((data) => {
          // 1.100行的处理代码
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);
          
        }).catch((err) => {
          // 调用reject的时候会把错误信息传到这里输出 
          console.log(err);
        })
    

    三,promise的三种状态和另外的处理方式

    Promise的另外理形式(不用catch,then里面传入两个参数)

      // 模拟的异步操作
        new Promise((resolve,reject) => {
          setTimeout(() => {
            // 请求成功
            resolve('Hello VueJs')
            // 请求失败
            reject('err message')
          },1000)
        }).then(data => {
          console.log(data);
        },err => {
          console.log(err);
        })
    

    四,Promise的链式调用

    new Promise((resolve => resolve(结果)))简写如下:

    Promise.resolve(结果)

  • 相关阅读:
    奖券数目
    用jQuery和ajax实现搜索框文字自动补全功能
    简单的文件上传功能实现(java)
    示例演示公告通知标题无缝向上滚动,文字段落无缝向上滚动,简单的wangeditor富文本编辑器,简单的音乐播放demo
    SSM框架中注解含义及应用场景小结
    数据库优化以及SQL优化小结
    javaWEB中前后台乱码解决问题小结
    线程同步的方法
    MySQL的简单使用
    springMVC运行流程图及运行原理
  • 原文地址:https://www.cnblogs.com/toprogram/p/12595316.html
Copyright © 2011-2022 走看看