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(结果)

  • 相关阅读:
    InnoSetup 打包代码 检测.netFramework
    PartialView中的页面重定向
    Cocos2dx 学习之引擎介绍
    30个高质量的免费jquery滑块PSD文件
    HBase Shell
    图灵百年诞辰 1912.6.232012.6.23
    常用的数据分页技术及比较
    Cocos2dx学习之windows 7的visual studo 2010开发环境安装
    C#实现简易ajax调用后台方法
    AJAX(Professional ASP.NET MVC 3
  • 原文地址:https://www.cnblogs.com/toprogram/p/12595316.html
Copyright © 2011-2022 走看看