Js拓展_promise

置顶 已于 2022-03-05 10:48:54 修改
阅读量504 收藏 2
点赞数 3
分类专栏： Js拓展 文章标签： python 开发语言 后端
于 2022-03-03 22:09:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45578388/article/details/123250411
版权

文章目录

一、什么是Promise

Promise是es6为了方便异步编程的新的解决方案，从语法上来看它是一个构造函数，用于封装异步任务，并且对其结果进行处理

//异步编程
//fs文件操作
require('fs').readFile('./index.html',(err,data)=>{})
//数据库操作
//AJAX
$.get('/server',(data)=>{})
//定时器
setTimeout(()=>{},2000)

二、Promise优缺点

1.promise优点

  1. 指定回调函数的方式更加灵活
  2. 支持链式调用，可以解决回调地狱问题
  3. 更好的进行错误捕捉

2.promise缺点

  1. 无法取消promise，一代新建就会立即执行，无法中途取消
  2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部
  3. 当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

三、Promise的创建

promise构造函数包含一个参数和一个带有resolve和reject两个参数的回调。在回调中执行一些操作，如果一切正常则调用resolve，否则调用reject。

setTimeout模拟异步操作：

var myFirstPromise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("成功!"); //代码正常执行！
  }, 250);
});
myFirstPromise.then(function(successMessage) {
  document.write("Yay! " + successMessage);
});

在这里插入图片描述

四、Promise实践

1、promise读取文件

let promise= new Promise((resolve,reject)=>{
  const fs = require('fs')
  fs.readFile('./data.txt',(err,data)=>{
    if (err) reject(err);
    resolve(data)
  })
})
//调用then
promise.then(value => {
  console.log(value.toString())
},reason => {
  console.log(reason)
})

2、promise封装AJAX

<body>
<button>点击发送请求</button>
</body>
<script>
var promise = new Promise(function(resolve, reject) {
  const btn = document.querySelector('button')
  btn.addEventListener('click',function(){
    //1.创建对象
    const xhr = new XMLHttpRequest()
    //2.初始化
    xhr.open('GET','https://api.apiopen.top/getJoke')
    //3.发送
    xhr.send()
    //4.处理响应结果
    xhr.onreadystatechange = function(){
      if (xhr.readyState ===4 ){
        if (xhr.status>=200&&xhr.response){
          resolve(xhr.response)
        }else {}
        reject(xhr.status)
      }
    }
  })
});
promise.then(value => {
  console.log(value)
},reason => {
  console.log(reason)
});
</script>

3.Promise封装函数

function mineReadFile(Path){
  return new Promise((resolve,reject)=>{
    //读取文件
    require('fs').readFile(Path,(err,data)=>{
      if (err) reject(err);
      resolve(data)
    })
  })
}
mineReadFile('./data.txt').then(value => {
  console.log(value.toString())
},reason => {
  console.log(reason)
})

4.promisify方法

传入一个错误优先的回调风格的函数（以（err，value）=>…会带哦作为最后一个参数），并返回一个Promise版本

//引入util模块
const util = require('util');
//引入fs模块
const fs = require('fs')
let  mineReadFile = util.promisify(fs.readFile);
mineReadFile('./data.txt').then(value => {
  console.log(value.toString())
})

五、Promise状态

描述：实例对象中的一个属性[PromiseState]

三种状态：

  1. pending（进行中）
  2. resolved/fulfilled（已成功）
  3. rejected（已失败）

状态改变：

  1. pending变为resolved
  2. pending变为reje。cted

PS：只有这两种变化，且一个promise对象只能改变一次

六、Promise对象的值

描述：实例对象的另一个属性[PromiseResult]
保存着异步任务【成功/失败】的结果

只有resolve和reject可以对该值进行修改

七、Promise的API

1. Promise构造函数：

Promise(excutor){}

  1. executor 函数：执行器 （resolve，reject）=>{}
  2. resolve函数：内部定义成功时调用的函数 value=>{}
  3. reject函数：内部定义失败时调用的函数reason=>{}

PS：executor会在Promise内部立即同步调用，异步操作在执行器中执行

2.Promise.prototypr.then方法：

（onRsolved.onRejected）=>{}

  1. onResolved函数：成功的回调函数（value）=>{}
  2. onRejected函数：失败的回调函数（reason）={}

PS：指定用于得到成功value的成功回调和用于得到失败reason的失败会带哦返回一个新的promise对象

3.Promise.prototype.catch方法：

（onRejected）=>{}

  1. onRejected函数：失败的回调函数（reason）=>{}

PS:then()的语法糖，相当于：then(undefined,onRejected)

4.Promise.resolve方法:

(value)=>{}

  1. value:成功的数据或者promise对象

PS：返回一个成功/失败的promise对象

5.Promise.reject方法：

（reason）=>{}

  1. reason：失败的原因

PS：返回一个失败的promise对象

6. Promise.all方法：

（promise）=>{}

  1. promises:包含n个promise的数组

PS：返回一个新的promise，只有所有的promise都成功才算成功

let p1 = new Promise((resolce,reject)=>{
  resolce('OK')
})
// let p2 = Promise.resolve('Sucess')
let p2 = Promise.reject('Error')
let p3 = Promise.resolve('Oh Yeah')

const res= Promise.all([p1,p2,p3])
console.log(res)

在这里插入图片描述

7.Promise.race方法：

（promise）=>{}

  1. promises:包含n个promise的数组

PS：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

let p1 = new Promise((resolce,reject)=>{
  resolce('OK')
})
// let p2 = Promise.resolve('Sucess')
let p2 = Promise.reject('Error')
let p3 = Promise.resolve('Oh Yeah')

const res= Promise.race([p1,p2,p3])
console.log(res)

在这里插入图片描述

八、如何改变promise的几个关键问题

1.如何改变promise的状态

  1. resolve(value): 如果当前时pending就会变成resolved
  2. reject(reason): 如果当前时pending就会变成rejected
  3. 抛出异常：如果档期那时pending就会变成rejected
<script>
let p1 = new Promise((resolve,reject)=>{
  // 1.resolve函数
  // resolce('OK') // pending =>fulfilled(resolved)
  // 2.reject函数
  // reject('error') //pending => rejected
  // 3. 抛出错误
  throw 'erro';
})
console.log(p1)
</script>

2.一个promise指定多个成功/失败回调函数时，都会调用吗？

当promise改变未对应状态时都会调用

let p1 = new Promise((resolve,reject)=>{
  resolve('OK')
})
p1.then(value => {
  console.log(value)
})
p1.then(value => {
  alert(value)
})

3.改变promise状态和指定回调函数谁先谁后？

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

4.promise.then()返回的新promise的结果状态由什么决定？

  1. 简单表达：由then()指定的回调函数执行的结果决定。
  2. 详细表达：
  1. 如果抛出异常，新promise变为rejected，reason为抛出的异常。
  2. 如果返回的是非promise的任意值，新promise变为resolved，value为返回的值。
  3. 如果返回的是一个新promise，此promise的结果就会成为新promise的结果。

5.promise如何串联多个操作任务？

  1. promise的then()返回一个新的promise，可以开发成then()的链式调用。
  2. 通过then()的链式调用串联多个同步/异步任务。
//后一个回调返回的时前一个回调函数的结果
let p1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('ok')
  },1000)
})
p1.then(value => {
  return new Promise((resolve,reject)=>{
    resolve('success')
  })
}).then(value => {
  console.log(value)// 打印success
}).then(value => {
  console.log(value)//undefined 上一个函数没有指定返回值
})

6.promise异常穿透？

  1. 当使用promise的then()链式调用时，可以再最后指定失败的回调。
  2. 前面任何操作除了异常，都会传到最后失败的回调中处理。
let p1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    // reject('err')
    resolve('ok')
  },1000)
})
p1.then(value => {
  // console.log(11)
  throw '失败了'
}).then(value => {
  console.log(22)
}).then(value => {
  console.log(33)
}).catch(reason => {
  console.log(reason)
})

7.中断promise链？

  1. 当使用promise的then()链式调用时，在中间中断，不在调用后面的回调函数。
  2. 方法：在回调函数中返回一个pendding状态的promise对象
let p1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('ok')
  },1000)
})
p1.then(value => {
  console.log(11)
  // 有且只有一个方式
  return new Promise(()=>{})
}).then(value => {
  console.log(22)
}).then(value => {
  console.log(33)
}).catch(reason => {
  console.log(reason)
})

九、手写Promise

class Promise {
  //构造方法
  constructor(executor) {
    //添加属性
    this.PromiseState = 'pending'
    this.PromiseResult = null
    // 声明属性
    this.callbacks = []
    // 保存实例对象this的值
    const self = this;

    // resolve
    function resolve(data) {
      //判断状态
      if (self.PromiseState !== 'pending') return
      // 1.修改状态 promiseState
      self.PromiseState = 'fulfilled' //resolved
      // 2.设置对象结果的值 promiseResult
      self.PromiseResult = data
      // 调用成功的回调函数
      setTimeout(() => {
        self.callbacks.forEach(item => {
          item.onResolved(data)
        })
      })
    }

    // reject
    function reject(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'rejected' //resolved
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach(item => {
          item.onRejected(data)
        })
      })
    }

    try {
      //同步调用执行器函数
      executor(resolve, reject);
    } catch (e) {
      //修改promise对象状态为【失败】
      reject(e)
    }
  }

  // then方法
  then(onResolved, onReject) {
    const self = this
    // 判断回调函数参数
    if (typeof onReject !== 'function') {
      onReject = reason => {
        throw reason
      }
    }
    if (typeof onResolved !== 'function') {
      onResolved = value => value;
    }
    return new Promise((resolve, reject) => {
      //封装函数callback
      function callback(type) {
        try {
          //获取回调函数的执行结果
          let result = type(self.PromiseResult)
          if (result instanceof Promise) {
            //如果时Promise类型的对象
            result.then(v => {
              resolve(v)
            }, r => {
              reject(r)
            })
          } else {
            // 结果的对象状态为成功
            resolve(result)
          }
        } catch (e) {
          reject(e)
        }
      }

      //调用回调函数 PromiseState
      if (this.PromiseState === 'fulfilled') {
        //将then方法改为异步
        setTimeout(() => {
          callback(onResolved)
        })
      }
      if (this.PromiseState === 'rejected') {
        setTimeout(() => {
          callback(onReject)
        })
      }
      // 判断pending状态
      if (this.PromiseState === 'pending') {
        // 保存回调函数
        this.callbacks.push({
          onResolved: function() {
            callback(onResolved)
          },
          onRejected: function() {
            callback(onReject)
          },
        })
      }
    })
  }

  // catch方法
  catch(onReject) {
    return this.then(undefined, onReject)
  }

  // resolve方法
  static resolve(value) {
    //添加Promise对象
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      } else {
        resolve(value)
      }
    })
  }

  // 添加reject方法
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

  // 添加all方法
  static all(promise) {
    // 返回结果时Promise对象
    return new Promise((resolve, reject) => {
      //定义一个计数器
      let count = 0
      let array = []
      // 遍历
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(v => {
          //当所有对象都是成功的
          count++
          //将成功的对象存入到数组中
          array[i] = v
          if (count === promise.length) {
            resolve(array);
          }
        }, r => {
          reject(r)
        })
      }
    })
  }

  // 添加race方法
  static race(promise) {
    return new promise((resolve, reject) => {
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      }
    })
  }
}

十、async和await

1.async函数

  1. 函数的返回值为Promise对象
  2. promise对象的结果由async函数执行的返回值决定
async function main(){
  //1.如果返回值是一个非Promise的数据
  // return 321
  //2.如果返回 值是一个promise对象
  // return new Promise((resolve,reject)=>{
  //   reject('ERROR')
  // })
  //3.抛出异常
  throw 'NO'
}
let result  = main()
console.log(result)

2. await表达式

  1. await右侧的表达式一般为Promise对象，但也可以是其他的值
  2. 如果表达式时promise对象，await返回的时prmise成功的值
  3. 如果表达式是其他值，直接将此值转会为await的返回值
async function main(){
  let p = new Promise((resolve,reject)=>{
    // resolve('ok')
    reject('error')
  })
  //1.右侧为promise
  // let res = await p; //ok
  //2.右侧为其他类型的数据
  // let res2 =await 20; //20
  //3.promise是失败的状态
  try{
    let res3 = await p //error
  }catch (e){
    console.log(e)
  }
}
main()

3.aync和await结合

案例1

可以看到和回调函数的方式比起来，这种方式非常

const fs = require('fs')
const util = require('util')
const mineReadFile = util.promisify(fs.readFile)
// 回调函数
// fs.readFile('../resource/data.txt',(err,data)=>{
//   if (err) throw err
//   fs.readFile('../resource/data1.txt',(err,data1)=>{
//     if (err) throw err
//     fs.readFile('../resource/data2.txt',(err,data2)=>{
//       if (err) throw err
//       console.log((data+data1+data2).toString())
//     })
//   })
// })

// async 与await
async function main() {
  try {
    //读取第一个文件的内容
    let data = await mineReadFile('../resource/data.txt')
    let data1 = await mineReadFile('../resource/data1.txt')
    let data2 = await mineReadFile('../resource/data2.txt')
    console.log((data + data1 + data2).toString())
  }catch (e){
    console.log(e)
  }
}
main()

案例2

封装AJAX请求

function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.open('GET', url)
    xhr.send()
    //处理结果
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.response)
        } else {
          reject(xhr.status)
        }
      }
    }
  })
}

// sendAJAX('https://api.apiopen.top/getJoke')
//   .then(value => {
//     console.log(value)
//   }, reason => {
//     console.warn(reason)
//   })

let btn = document.querySelector('button')
btn.addEventListener('click', async function() {
  //获取段子
  let res = await sendAJAX('https://api.apiopen.top/getJoke')
  console.log(res)
})
是发财不是旺财
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
JS_30:Vanilla JavaScript mini项目
04-28
**JavaScript基础** JavaScript，简称JS，是一种轻量级的、解释型的编程语言，主要用于网页和网络应用开发。...无论是新手还是经验丰富的开发者，这个项目都是巩固和拓展JavaScript知识的好资源。
javascript_js学习教程
03-23
1. Node.js将JavaScript拓展到服务器端，利用非阻塞I/O和事件驱动模型处理大量并发连接。 2. NPM（Node Package Manager）：Node.js的包管理器，提供大量第三方模块，加速开发进程。 通过这个“javascript_js学习...
Promise的几个扩展API总结
weixin_33721427的博客
02-13 168
Promise的几个扩展API总结 1. Promise.none 描述： 和 Promise.all 相反，当所有的promise被拒绝之后，none方法执行完成的决议，如果存在一个promise执行完成的决议，none方法则执行拒绝 code： Promise.none = function(promises) { ret...
JS通用方法扩展
www.v5qq.com的技术博客
08-22 141
/* * 系统中JS的扩展函数 * * */ // 清除两边的空格 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ''); }; // 合并多个空白为一个空白 String.prototype.ResetBlank = function() { var ...
JS中Promise的使用（看情况扩展内容）
LoveYouZsw的博客
04-22 181
我们知道，在JS中… 我们知道，在js中，所有代码都是单线程执行的，js中没有类似Java、Python多线程编程的概念，因此基于网页请求的所有网络操作，都是靠异步执行的，异步过程可以通过回调函数实现。 而本篇文章的主人公Promise对象则是ES6标准中引入的有关异步编程的解决方案，在此可以说句题外话，有关异步同步，单线程多线程的区别，简单一句话概括就是，异步同步是目的，单、多线程只是实现其的一种手段而已。 Promise本身作为一个进行异步操作的对象，有三种状态，进行中的pending、已完成的fulf
JS扩展方法
08-04 155
JS扩展方法 　JS扩展方法与C#的扩展方法非常相似，也是可以链式调用的，也是通过对某个类的扩展写法来实现。这个东西非常好用，如果将预先写好的方法放到一个js里面引用的话，那么后面写js将非常有趣。 　　下面给出一个例子： <head> ...
深入理解 Promise 五部曲：4. 扩展问题
wliked的专栏
11-14 606
[转, 原文地址:http://segmentfault.com/a/1190000000600268 ] 现在，我希望你已经看过深入理解Promise的前三篇文章了。并且假设你已经完全理解Promises是什么以及深入讨论Promises的重要性。 不要扩展原生对象！ 回到2005年，Prototype.js框架是最先提出扩展Javascript原生对象的内置prototy
JavaScript_标准库.zip
05-20
`core-js`库包含了各种ES6+的新特性，如Promise、Set、Map、Proxy、Reflect、Symbol等，以及一些语言的改进，如尾调用优化、模块系统（如CommonJS和ES Modules）、类和继承等。此外，`core-js`还提供了对DOM操作、...
JavaScript_高级用户LLM前端.zip
最新发布
05-20
总的来说，JavaScript是一门多才多艺的语言，它在前端开发中扮演着至关重要的角色，而且随着技术的进步，JavaScript的使用场景和能力也在不断拓展。深入理解和熟练运用JavaScript的各个方面，对于成为一名优秀的前端...
JS_project
03-28
JavaScript，通常简称为JS，是一种广泛使用的脚本语言，主要用于客户端的网页开发，但如今已拓展到服务器端，如Node.js环境。它使得网页更加动态、交互性强，能够处理用户输入、与服务器通信以及操作网页文档对象...
js 扩展
LU142857的专栏
03-22 321
function loading(msg, jq) { var _1cb = jq || $(document.body); if (!_1cb.children("div.datagrid-mask").length) { $("<div class=\"datagrid-mask\" style=\"display:block;z-index:999999...
js的扩展
LL22222222的博客
12-01 581
JSON对象、 数据解析、 JSON方法、 模板渲染、 缓存懒加载、 正则表达式RegExp、 元字符、 修饰符、 正向预查、 贪婪模式 、replace方法、 分组与不分组、 test、match与exec正则库封装、 表单校验、 图片预存懒加载、 自定义封装滚动组件、 多重轮播（循环、视差、旋转木马）、 选项卡切换、 楼梯导航、吸顶导航、拖拽导航 、 JavaScript编码风格指南、 console应用技巧 ...
扩展JS
weixin_30883271的博客
07-19 116
//JS的扩展方法： 1 定义类静态方法扩展 2 定义类对象方法扩展 var aClass = function(){} //1 定义这个类的静态方法 aClass.sayHello = function(){ alert('say hello'); } ...
JavaScript：异步简介与Promise实践拓展
MyWay
07-24 319
JavaScript语言的一大特点就是单线程，但是在遇到鼠标点击、网络请求、动画执行或者对于Node.js来讲要遇到的数据库操作这一类明显耗时程序的时候，采用单线程的话，会产生明显的阻塞。而对此的解决方案，js是通过任务队列来达到异步的效果。 举个最简单的异步例子 setTimeout(()=>{ console.log("123"); },1000) console.log("456") 无疑，这串代码的输出显然是 456 123 异步的常见解决方案 上边这个例子中，我们要使得输出正常地表.
js扩展方法
mmrsdym的专栏
06-05 625
1.数组扩展方法 1.1删除数组中的指定下标的元素 Array.prototype.remove = function(dx) { if(isNaN(dx)||dx>this.length){return false;} this.splice(dx,1); } 1.2删除数组重复项 如下实现方式在效率和实现方法及写法来说，是比较优的 Array.prototyp
JavaScript知识点扩展
weixin_44999716的博客
01-09 282
JavaScript知识点扩展 作用域 作用域作用： 1.定义：变量 函数 或者成员在整个程序内可以被访问的范围； 2.也可用于信息隐藏 块作用域：{…}包含的代码就是一个块作用域，JS没有块级作用域； 动态作用域：函数内的成员是否可以被访问只有在运行的时候才能确定 function f(){ alert(x); } function f1(){ var x = 1; f(); } function f2(){ var x = 2; f(); } f1();//报错：x没有定义，说明JS没有动态作
JavaScript中的扩展方法
whr
10-08 546
在js中可以利用拓展方法写一些自己的方法
常用js 扩展
猎人在吃肉
09-19 574
// 替换所有 String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { if (!RegExp.prototype.isPrototypeOf(reallyDo)) { return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g
代码解析 static bool CreateCallbackAndPromise(napi_env env, MdCtx *context, size_t argc, size_t maxCount, napi_value callbackValue) { context->asyncType = (argc == maxCount) ? ASYNC_TYPE_CALLBACK : ASYNC_TYPE_PROMISE; if (context->asyncType == ASYNC_TYPE_CALLBACK) { if (!GetCallbackFromJSParams(env, callbackValue, &context->callback)) { LOGE("get callback failed!"); return false; } } else { napi_create_promise(env, &context->deferred, &context->promise); } return true; }
06-03
具体来说，如果采用回调函数形式，则调用 `GetCallbackFromJSParams` 函数从 JS 参数中获取回调函数的引用，并将该引用保存到 `MdCtx` 结构体中；如果采用 Promise 对象形式，则调用 `napi_create_promise` 函数创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是发财不是旺财

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值