promise

蘩祁11

已于 2024-01-25 00:10:56 修改

阅读量61

点赞数

文章标签： javascript 前端

于 2023-08-10 21:31:38 首次发布

本文链接：https://blog.csdn.net/m0_73783119/article/details/132218388

版权

一.准备

函数对象与实例对象
函数对象: 将函数作为对象使用时, 简称为函数对象
实例对象: new 函数产生的对象, 简称为对象
括号左边是函数，.的左边是对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01_准备_函数对象与实例对象</title>
</head>
<body>

  <script>
   function Fn(){//Fn函数

   }
   const fn=new Fn()//Fn是构造函数，fn是实例对象
   console.log(Fn.prototype);//Fn为函数对象
   Fn.call({})//call为调用函数  Fn为这是一个函数对象
   Fn.bind({})
   $('#test')//$是一个函数
   $.get('#test')//jQuery 函数对象
   function Person(params)
   {

   }
   const p=new Person()

  </script>
</body>
</html>

2.同步回调和异步回调

1). 同步回调:
理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
例子: 数组遍历相关的回调函数 / Promise的excutor函数
2). 异步回调:
理解: 不会立即执行, 会放入回调队列中将来执行
例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02_准备_回调函数的分类</title>
</head>
<body>
  <script>
   
    */
  //  1.同步回调函数  
  // const arr=[1,3,5]
  // arr.forEach(item=>{//遍历回调，同步回调函数，不会放在队列里面
  //   console.log(item);
  // })
  // console.log('forEach()以后');
  // 2.异步回调函数  会放到队列中将来执行
  setTimeout(()=>{
    console.log('timeout callback()');
  },0)
  console.log('setTimeout()之后');
  </script>
</body>
</html>

3.错误类型
目标: 进一步理解JS中的错误(Error)和错误处理
mdn文档: https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
1. 错误的类型
Error: 所有错误的父类型
ReferenceError: 引用的变量不存在
TypeError: 数据类型不正确的错误
RangeError: 数据值不在其所允许的范围内
SyntaxError: 语法错误
2. 错误处理
捕获错误: try … catch
抛出错误: throw error
3. 错误对象
message属性: 错误相关信息
stack属性: 函数调用栈记录信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS的error处理</title>
</head>
<body>

<script>
  // 最常见是前两种
//  1.常见的内置错误
//  1)ReferenceError: 引用的变量不存在
      // console.log(a);//ReferenceError: a is not defined
      // console.log('---');//没有捕获error  下面代码不会执行
//  2)TypeError: 数据类型不正确的错误
    // let b=null
    // console.log(b.xx);//TypeError: Cannot read properties of null (reading 'xx')
    // b={}
    // b.xxx()// TypeError: b.xxx is not a function
// 3）RangeError: 数据值不在其所允许的范围内
// function fn(){
//   fn()//RangeError: Maximum call stack size exceeded
// }
// fn()
// 4）SyntaxError: 语法错误
// const c=""""//SyntaxError: Unexpected string


// 2.错误处理
//  1)捕获错误: try ... catch
// try{
//   let d
//   console.log(d.xxx);
// }catch(error){
//   console.log(error.message);
//   console.log(error.stack);
// }
// // 出错之后
// console.log('出错之后');

// 2)抛出错误: throw error
function something(){
  if(Date.now()%2===1)
  {
    console.log('当前时间是奇数，可以执行任务');
  }
  else{//如果事件偶数抛出异常，由调用处理
    throw new Error('当前时间是偶数，无法执行任务')
  }
}
// 捕获处理异常
try{
  something()
}catch(error){
  alert(error.message)
}
</script>
</body>
</html>

二.promise的基本使用

Promise 是什么?

抽象表达:
Promise 是 JS 中进行异步编程的新的解决方案(旧的是谁?)
具体表达:
(1) 从语法上来说: Promise 是一个构造函数
(2) 从功能上来说: promise 对象用来封装一个异步操作并可以获取其结果
2.1.2. promise 的状态改变
pending 变为 resolved
pending 变为 rejected
说明: 只有这 2 种, 且一个 promise 对象只能改变一次
无论变为成功还是失败, 都会有一个结果数据
成功的结果数据一般称为vlaue, 失败的结果数据一般称为 reason

promise 的基本流程

在这里插入图片描述

promise的基本使用

1.创建一个新的promise对象
2.执行异步操作任务
3.1如果成功，调用resolve(value)
3.2 如果失败，调用reject(reason)
接受得到成功的value数据 onResolved
接受得到失败的reason数据 onRejected

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_promise基本使用</title>
</head>
<body>
  <script>
    // 1.创建一个新的promise对象
   const p= new Promise((resolve,reject)=>{//执行器函数
      // 2.执行异步操作任务
      setTimeout(()=>{
        const time=Date.now()//如果当前时间是偶数代表成功
      // 3.1 如果成功 ，调用resolve(value)
      if(time%2==0)
      {
        resolve('成功的数据，time='+time)
      }
      else{
              // 3.2 如果失败 ，调用reject(reason)
              reject('失败的数据，time='+time)

      }
      },1000)


    })
    p.then(
      value=>{
// 接受得到成功的value数据  onResolved
console.log('成功的回调',value);
      },
      reason=>{
// 接受得到失败的reason数据 onRejected
console.log('失败的回调',reason);

      }
    )
  </script>
</body>
</html>

为什么要用 Promise?

指定回调函数的方式更加灵活

旧的: 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函
数(甚至可以在异步任务结束后指定/多个)

支持链式调用, 可以解决回调地狱问题

什么是回调地狱?
回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱的缺点?
不便于阅读
不便于异常处理
解决方案?
promise 链式调用
终极解决方案?
async/await

promise 的API

Promise构造函数: Promise (excutor) {}
excutor函数: 同步执行 (resolve, reject) => {}
resolve函数: 内部定义成功时我们调用的函数 value => {}
reject函数: 内部定义失败时我们调用的函数 reason => {}
说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行
Promise.prototype.then方法: (onResolved, onRejected) => {}
onResolved函数: 成功的回调函数 (value) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调
返回一个新的promise对象
Promise.prototype.catch方法: (onRejected) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected)
Promise.resolve方法: (value) => {}
value: 成功的数据或promise对象
说明: 返回一个成功/失败的promise对象
Promise.reject方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的promise对象
Promise.all方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
Promise.race方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>06_Promise的API</title>
</head>
<body>
  
<script>
  new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('成功的数据')
        reject('失败的数据')
    },1000)
  }).then(
    value=>{
        console.log('onResolved()1',value);
    }
  ).catch(
    reason=>{
        console.log('onRejected()1',reason);
    }
  )


//   产生成功值为promise的对象
const p1=new Promise((resolve,reject)=>{
    resolve(1)
})
const p2=Promise.resolve(2)
const p3=Promise.reject(3)
// p1.then(value=>{console.log(value);})
// p2.then(value=>{console.log(value);})
// p3.then(null,reason=>{console.log(reason);})


// const pAll=Promise.all([p1,p2,p3])
const pAll=Promise.all([p1,p2])

pAll.then(
    values=>{
        console.log('all onResolved()',values);
    },
    reason=>{
        console.log('all OnRejected()',reason);
    }
)
// 比赛看谁先完成
const pRace=Promise.race([p1,p2,p3])
pRace.then(
    values=>{
        console.log('all onResolved()',values);
    },
    reason=>{
        console.log('all OnRejected()',reason);
    }
)

</script>
</body>
</html>

promise的几个问题

Promise构造函数: Promise (excutor) {}
excutor函数: 同步执行 (resolve, reject) => {}
resolve函数: 内部定义成功时我们调用的函数 value => {}
reject函数: 内部定义失败时我们调用的函数 reason => {}
说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行
Promise.prototype.then方法: (onResolved, onRejected) => {}
onResolved函数: 成功的回调函数 (value) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调
返回一个新的promise对象
Promise.prototype.catch方法: (onRejected) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected)
Promise.resolve方法: (value) => {}
value: 成功的数据或promise对象
说明: 返回一个成功/失败的promise对象
Promise.reject方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的promise对象
Promise.all方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
Promise.race方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

3.改变promise状态和指定回调函数谁先谁后?
(1)都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2)如何先改状态再指定回调?
①在执行器中直接调用resolve()/reject()
②延迟更长时间才调用then()
(3)什么时候才能得到数据?
①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

promise.then()返回的新promise的结果状态由什么决定?
(1)简单表达: 由then()指定的回调函数执行的结果决定
(2)详细表达:
①如果抛出异常, 新promise变为rejected, reason为抛出的异常
②如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
③如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果

蘩祁11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise

2.同步回调和异步回调1). 同步回调:理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中例子: 数组遍历相关的回调函数 / Promise的excutor函数2). 异步回调:理解: 不会立即执行, 会放入回调队列中将来执行例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调3.错误类型目标: 进一步理解JS中的错误(Error)和错误处理。
复制链接

扫一扫