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

  • 相关阅读:
    LeetCode:230. 二叉搜索树中第K小的元素
    LeetCode:229. 求众数 II
    LeetCode:228. 汇总区间
    LeetCode:225. 用队列实现栈
    LeetCode:209. 长度最小的子数组
    LeetCode:208. 实现 Trie (前缀树)
    疯狂的订餐系统-软件需求分析挑战之旅 【转】
    产品需求文档(PRD)的写作 【转】
    软件需求文档标准格式
    通过实例编写开发规范文档 【转】
  • 原文地址:https://www.cnblogs.com/toprogram/p/12595316.html
Copyright © 2011-2022 走看看