方君の小窝 方君の小窝
首页
  • 原生js总结
  • 样式相关
  • vue
  • 其他必备知识
  • php
其他
GitHub

方君

迷糊小前端
首页
  • 原生js总结
  • 样式相关
  • vue
  • 其他必备知识
  • php
其他
GitHub
  • 原生js总结

    • js基础
    • ajax
    • 跨域,js同步异步
    • promise(待扩展,微队列及all,race案例)
      • 基本用法
        • 1.Promise对象是一个构造函数,用来生成Promise实例
        • 2.Promise实例生成后,可以用then方法指定回调函数
        • 3.链式调用
    • 原型、原型链、继承
    • 闭包
    • 设计模式-单例、观察者
    • jquery
    • json格式
    • class
    • 模块化
    • cookie
  • 样式相关

  • vue

  • 其他必备知识

  • 前端
  • 原生js总结
方君
2020-08-24

promise

# promise

1,Promise是在es6中规定的javascript处理异步问题的一种解决方案

2,Promise的出现,原本是为了解决回调地狱的问题

3,Promise原理是将异步函数包裹,并把回调函数队列化,使其按期望顺序执行

# 基本用法

# 1.Promise对象是一个构造函数,用来生成Promise实例

var promise = new Promise(function(resolve, reject) {
  // 执行器 executor

  if (/* 异步操作成功 */){
    resolve();
  } else {
    reject();
  }
});

promise.then(function(){
    console.log("0");
    //通过resolve调用执行
},function(){
    
    console.log("1");
    //通过reject调用执行
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Promise的三种状态:pending resolved rejected

Promise接受一个函数作为参数,该函数有两个参数,分别是resolve 和 reject,它们是两个函数,由javascript引擎提供,不用自己部署。

resolve函数的作用是将Promise对象的状态从pending变为resolved 在异步操作成功时调用,将异步操作结果,作为参数传递出去

reject函数的作用是将Promise对象的状态从pending变为rejected 在异步操作失败时调用,将异步操作报出的错误,作为参数传递出去


# 2.Promise实例生成后,可以用then方法指定回调函数

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
1
2
3
4
5

then函数可以接收两个回调函数作为参数,第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是状态变为rejected时调用,第二个是可选函数,可不提供。

# 3.链式调用

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then`方法。

 var sayHello = function(name){
        return new Promise(function(resolve,reject){
          setTimeout(() => {
            //console.log("hello"+name);
            resolve(name);
          }, 1000);
        })
    }
    sayHello("小米").then(function(val){
      console.log(val);
      return sayHello("华为");
    }).then(function(val){
        console.log(val)
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

promise流程

let promise = new Promise(function(resolve,reject){
    console.log('Promise');
    resolve();
});
promise.then(function(){
    console.log('resolved');
});
console.log('Hi!');
1
2
3
4
5
6
7
8

then进入task queue

编辑
#基础
跨域,js同步异步
原型、原型链、继承

← 跨域,js同步异步 原型、原型链、继承 →

最近更新
01
vue自定义指令&生命周期
08-24
02
ajax
08-24
03
设计模式-单例、观察者
08-24
更多文章>
Theme by Vdoing | Copyright © 2019-2020
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式