Promise教程(一)

Promise教程(一)

第1章:准备

区别实例对象与函数对象
  1. 实例对象:new函数产生的对象,称为实例对象,简称为对象
  2. 函数对象:将函数作为对象使用时,简称为函数对象
同步回调
  1. 理解:立即执行,完全执行完了才会结束,不会放入回调队列中
  2. 例子:数组遍历相关的回调函数、Promise的excutor函数
异步回调
  1. 理解:不会立即执行,会放入回调队列中将来执行
  2. 例子:定时器回调、ajax回调、Promise的成功/失败回调
进一步理解js中的错误(ERROR)和错误处理
  1. 错误的类型

    • Error:所有错误的父类型

    • ReferenceError:引用的变量不存在

      console.log(a)

    • TypeError:数据类型不正确

      const demo = ()=>{}

      demo()()

    • RangeError:数据值不在其所允许的范围内

      const demo() = ()=>{demo()}

      demo()

    • SyntaxError:语法错误

      console.log(

  2. 错误处理

    • 捕获错误:try{}catch{}

      try中放可能出现错误的代码,一旦出现错误立即停止try中代码的执行,调用catch,并携带错误信息

    • 抛出错误:throw error

  3. 错误对象

    • message属性:错误相关信息
    • stack属性:记录信息

第2章:Promise的理解和使用

Promise是什么
  1. 抽象表达:

    • Promise是一门新的技术(ES6提出的)

    • Promise是JS中异步编程的新方案(旧方案是谁?—纯回调)

  2. 具体表达:

    • 从语法上来说:Promise是一个内置构造函数,是程序员自己new调用的
    • 从功能上来说:Promise的实例对象可以用来封装一个异步操作,并可以获得其成功/失败的值
  3. new Promise的时候,要传入一个回调函数,它是同步的回调,会在主线程上执行,它被称为executor函数、

  4. 每一个Promise实例都有3种状态,分别为:初始化(pending)、成功(fulfilled)、失败(rejected)

  5. 每一个Promise实例在刚被new出来的那一刻,状态都是初始化(pending)

  6. executor函数会接收2个参数,它们都是函数,分别用形参:resolve、reject接收

    • 调用resolve,会让Promise实例状态变为:成功(fulfilled),同时可以指定成功的value
    • 调用reject,会让Promise实例状态变为:失败(rejected),同时可以指定失败的reason
    const promise1 = new Promise((resolve, reject) => {
        resolve('foo');
    });	
    console.log(promise1);
    
Promise基本使用
  1. 重要语法

    • new Promise(executor)构造函数
    • Promise.prototype.then方法
  2. 基本编码流程

    1. 创建Promise的实例对象(pending状态),传入executor函数

    2. 在executor中启动异步任务(定时器、ajax请求)

    3. 根据异步任务的结果,做不同的处理:

      • 如果异步任务成功了:我们调用resolve(value),让Promise实例对象状态变为成功(fulfilled),同时指定成功的回调
      • 如果异步任务失败了:我们调用reject(reason),让Promise实例对象状态变为(rejected),同时指定失败的回调
    4. 通过then方法为Promise指定成功、失败的回调函数,来获取成功的value、失败的reason

      注意:then方法所指定的:成功的回调、失败的回调,都是异步的回调

  3. 关于状态的注意点:

    1. 三个状态:

      • pending:未确定的--------初始状态
      • fulfilled:成功的--------调用resolve()后的状态
      • rejected:失败的---------调用reject()后的状态
    2. 两种状态的改变

      pending ===> fulfilled

      pending ===> rejected

    3. 状态只能改变一次

    4. 一个Promise指定多个成功/失败回调函数,都会调用吗?

      会。

配合ajax使用
//创建一个Promise实例
const p = new Promise((resolve,reject) => {
    //创建一个XMLHttpRequest实例
    const xhr = new XMLHttpRequest()
    //绑定监听
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                //请求成功
                resolve(xhr.response)
            }else{
                //请求失败
                reject('出错了')
            }
        }
    }
    //配置请求的方式、地址、参数
    xhr.open('GET','https://www.tianqiapi.com/free/day?appid=23035354&appsecret=8YvlPNrz')
    //配置返回的数据类型为json
    xhr.responseType = 'json'
    //发送请求
    xhr.send()
})
p.then(
    (value) => {console.log(value)},//成功的回调
    (reason) => {console.log(reason)}//失败的回调
)
封装ajax请求
function sendAjax(url,data){
    return new Promise((resolve,reject) => {
        const xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300){
                    resolve(xhr.response)
                }else reject('出错了')
            }
        }
        let str = ''
        for (let key in data) {
            str += `${key}=${data[key]}&`
        }
        str.slice(0,-1)
        xhr.open('GET',url+'?'+str)
        xhr.responseType = 'json'
        xhr.send()
    })
}
const p = sendAjax('https://www.tianqiapi.com/free/day',{appid:23035354,appsecret:'8YvlPNrz'})
p.then(
    (value) => {console.log(value)},
    (reason) => {console.log(reason)}
)
纯回调封装ajax请求
function sendAjax(url,data,success,error){
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
        if(xhr.readyState ===4){
            if(xhr.status >= 200 && xhr.status < 300){
                success(xhr.response)
            }else error('出错了')
        }
    }
    let str = ''
    for (let key in data) {
        str += `${key}=${data[key]}&`
    }
    str.slice(0,-1)
    xhr.open('GET',url+'?'+str)
    xhr.responseType = 'json'
    xhr.send()
}
sendAjax(
    'https://www.tianqiapi.com/free/day',
    {appid:23035354,appsecret:'8YvlPNrz'},
    (value) => {console.log(value)},//成功的回调
    (reason) => {console.log(reason)}//失败的回调
)
几个常用的API
  1. Promise构造函数:new Promise (executor) {}
    • executor函数:是同步执行的,(resolve,reject) => {}
    • resolve函数:调用resolve将Promise实例内部状态改为成功(fulfilled)
    • reject函数:调用reject将Promise内部立即同步调用,异步代码放在executor函数中
  2. Promise.prototype.then方法:Promise实例.then(onFulfilled,onRejected)
    • onFulfilled:成功的回调函数(value) => {}
    • onRejected:失败的回调函数(reason) => {}
    • 特别注意(难点):then方法会返回一个新的Promise实例对象
  3. Promise.prototype.catch方法:Promise实例.catch(onRejected)
    • onRejected:失败的回调函数(reason)=> {}
    • 说明:catch方法是then方法的语法糖,相当于:then(undefined,onRejected)
  4. Promise.resolve方法:Promise.resolve(value)
    • 说明:用于快速返回一个状态为fulfilled或rejected的Promise实例对象
    • 备注:value的值可能是:(1)非Promise值 (2)Promise值
  5. Promise.reject方法:Promise.reject方法(reason)
    • 说明:用于快速返回一个状态必为rejected的Promise实例对象
  6. Promise.all方法:Promise.all(promiseArr)
    • promiseArr:包含n个Promise实例的数组
    • 说明:返回一个新的Promise实例,只有所有的promise都成功了才成功,只要有一个失败了就直接失败
  7. Promise.race方法:Promise.race(promiseArr)
    • promiseArr:包含n个Promise实例的数组
    • 说明:返回一个新的Promise实例,成功还是失败,以最先出结果的promise为准
如何改变一个Promise实例的状态?
  1. 执行resolve(value):如果当前是pending就会变为fulfiled
  2. 执行reject(reason):如果当前是pending就会变为rejected
  3. 执行器函数(executor)抛出异常:如果当前是pending就会变为rejected
改变Promise实例的状态和指定回调函数谁先谁后?
  1. 都有可能,正常情况下是先指定回调再改变状态,但也可以先改变状态再指定回调

  2. 如何先改变状态再指定回调?

    延迟一会再调用then()

  3. Promise实例什么时候才能得到数据?

    如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据

    如果先改变的状态,那当指定回调时,回调函数就会调用,得到数据

你可能感兴趣的:(前端,javascript,开发语言)