走进 Promise

111 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第19天,点击查看活动详情

image.png

ES6中Promise被列为正式规范。作为ES6中最重要的特性之一。

Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected

image.png

promise

在项目中接口调用的常见方式有

  • 原生ajax
  • 基于jQuery的ajax
  • Fetch
  • Promise

jS中常见的异步调用

  • 定时任何
  • ajax
  • 事件函数

Promise解决了什么问题

  • 主要解决异步深层嵌套
  • 语法更加简

1. Promise的基本使用

如何定义一个promise实例

  • 我们使用new来构建一个Promise Promise的构造函数接收一个参数,是函数,并且传入两个参数: resolve,reject, 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

  • Promise实例生成以后,可以用then方法指定resolved状态和reject状态的回调函数、

2. Promise的then方法参数中的函数的返回值

then中参数代表什么

  • then方法指定resolved状态和reject状态的回调函数

then返回值有几种

  • 可以返回一个非promise对象
  • 可以返回一个promise对象

3. Promise常用API对象方法

  • all Promise.all方法接受一个数组作参数,数组中的对象(p1、p2、p3)均为promise实例(如果不是一个promise,该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

  • race Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变(变为fulfilled或rejected),p的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数

4. Fetch基本使用

fetch 就是 ajax + Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多,fetch默认是get请求

Fetch中 get 和delete的传参

  • fetch(url, options).then()
  • GET参数传递 - 传统URL 通过url ? 的形式传参
  • restful形式的URL 通过/ 的形式传递参数
  • DELETE请求方式参数传递 和 get一样

Post和put如何传递参数

  • 需要在body 中传递参数
  • 需要指定headers因为默认Content-Type不是application/x-www-form-urlencoded

fetchAPI 中 响应格式

  • 用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSON,BLOB或者TEXT等等