Javascript on 404_@林达

初学Promise对象

Thu, 27 Mar 2025 22:33:37 +0800

初学Promise对象，异步基础

推荐实践代码，自己动手调试，更容易理解原理

基础

三个状态（重要）

pendding 等待状态
fullfilled 完成状态
rejected 失败状态

状态流向以及回调函数resolve和reject

Promise状态流向只有两种，而且状态一旦改变，则不会再变

调用reolve函数，则 pendding => fullfilled
调用rejecte函数，则pendding => rejected
只接收第一个参数调用后改变状态，其他的忽略

const promise = new Promise((resolve, reject) => {
  resolve(1);
  reject(2); // 被忽略
})
console.log(promise)
// PromiseState : fullfilled
// PromiseResult: 1

消费者 .then、.catch

最重要最基础的一个就是 .then

个人见解就是then就是对Promise对象的一个总结反馈，判断对象的状态并且执行fullfilled后的函数

.then 的第一个参数是一个函数，该函数将在 promise resolved 且接收到结果后执行。
.then 的第二个参数也是一个函数，该函数将在 promise rejected 且接收到 error 信息后执行。

下面例子，可自己通过注释选择resolve还是reject

let promise = new Promise(function(resolve, reject) {
  // setTimeout(() => resolve("done!"), 1000);
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// reject 运行 .then 中的第二个函数
promise.then(
  result => alert(result), // 不运行
  error => alert(error) // 1 秒后显示 "Error: Whoops!"
);

如果我们只对某个状态的情况感兴趣，那么我们可以只为 .then 提供一个函数参数：

let promise = new Promise(resolve => {
  setTimeout(() => resolve("done!"), 1000);
  // setTimeout(() => reject("fail!"), 1000);
});

promise.then(alert); // 1 秒后显示 "done!"
// promise.catch(alert); // 1 秒后显示 "fail!"

实际情况成功的情况较为常见，并且.then和.catch也可以通过链式写法

new Promise((resolve, reject) => {
  resolve(42);
}).then(value => {
  console.log(value); // 输出: 42
});

Promise.API

await+async

Promise 通过链式调用（如 .then() 和 .catch()）管理异步操作的成功或失败；
async 修饰的函数总会返回一个 Promise，无论返回的是普通值还是 Promise 本身；
await await语句之后的代码处于微队列，用于暂停 async 函数的执行，等待后面的 Promise 解析完成，然后直接获得解析结果，从而让异步代码写起来更像同步代码，避免了冗长的 .then() 链。

await 等待的不一定是promise对象，也有可能为await 1; ==> await Promise.resolve(1)

Promise.all

Promise.all([
  // 每个数组对象都是**异步微任务**，因此1和2瞬间输出
  // 对象5 需要等待 对象4 await执行完毕后执行，即3秒后输出3
  new Promise(resolve => setTimeout(() => resolve(4), 4000)), // 对象0，value4
  console.log(1), // 对象1，undefined（不是promise对象）
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 对象2，value2
  console.log(2), // 对象3，undefined
  await new Promise(resolve => setTimeout(() => resolve(3), 3000)),  // 对象4，value3
  console.log(3), // 对象5，undefined
]).then((res) => {
  console.log(res);
}) // 4秒后所有异步任务执行完毕，输出
[
    0:1,
    1:undefined,
    2:2,
    3:undefined,
    4:3,
    5:undefined
]

全部完成才会运行.then，如果有某一个失败，则不执行.then

Promise.allSettled([
  new Promise(resolve => setTimeout(() => resolve(4), 4000)),
  console.log(1),
  new Promise((resolve,reject) => setTimeout(() => reject(2), 2000)), // 这里使用reject
  console.log(2),
  await new Promise(resolve => setTimeout(() => resolve(3), 3000)), 
  console.log(3),
]).then((res) => {
  console.log(res);
})
[
    0:1,
    1:undefined,
    2:2,
    3:undefined,
    4:3,
    5:undefined
]

Promise.allsettled

如果任意的 promise reject，则 Promise.all 整个将会 reject。当我们需要所有结果都成功时，它对这种“全有或全无”的情况很有用

Promise.allSettled 等待所有的 promise 都被 settle，无论结果如何。结果数组会是这样的：

对成功的响应，结果数组对应元素的内容为 {status:"fulfilled", value:result}，
对出现 error 的响应，结果数组对应元素的内容为 {status:"rejected", reason:error}。

Promise.allsettled([
  new Promise(resolve => setTimeout(() => resolve(4), 4000)),
  console.log(1),
  new Promise((resolve,reject) => setTimeout(() => reject(2), 2000)), // 这里使用reject
  console.log(2),
  await new Promise(resolve => setTimeout(() => resolve(3), 3000)), 
  console.log(3),
]).then((res) => {
  console.log(res);
})
// 控制台输出
[
    0:{status:fullfiled,value:4},
    1:{status:fullfiled,value:undefined},
    2:{status:rejected,reson:2},
    3:{status:fullfiled,value:undefined},
    4:{status:fullfiled,value:3},
    5:{status:fullfiled,value:undefined},
]

参考文献

js小红书

ECMAScript 6 入门

一道让我失眠的 Promise 面试题

什么是防抖和节流？什么时候去用？

Sat, 26 Oct 2024 00:00:00 +0000

什么是防抖（Debounce）？

防抖（多次触发只执行最后一次）

原理：在高频率触发某个响应事件时，在规定时间间隔内如果没有再次触发，则属于最后一次完成交互，触发相对应的方法
常用：在用户输入搜索词的过程中，每一次输入都会触发 input 事件，但显然没必要每次都发送请求，只有当用户停止输入后，系统才发送一次最终的请求

手搓代码：

// 1.封装防抖函数
function debounce(fn, time) {
  // 4.创建一个标记用来存放定时器的返回值
  let timeout = null;
  return function () {
    // 5.每当用户触发input事件  把前一个 setTimeout 清楚掉
    clearTimeout(timeout);
    // 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
    timeout = setTimeout(() => {
      // 7.这里进行防抖的内容
      fn();
    }, time);
  };
}

// 2.获取inpt元素
var inp = document.getElementById("inp");
// 8. 测试防抖临时使用的函数
function sayHi() {
  console.log("防抖成功");
}
// 3.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件
inp.addEventListener("input", debounce(sayHi, 5000));

什么是节流（Throttle）？

节流（时间间隔内只允许执行一次）

原理：在高频率触发某个有响应方法的事件时，第一次触发响应事件，计时器开始计时，规定时间内继续交互不触发事件
常用：鼠标滚轮滑动触发下拉刷新、王者的英雄技能刷新

手搓代码：

// 1.封装节流函数
function throttle(fn, time) {
  //3. 通过闭包保存一个 "节流阀" 默认为false
  let temp = false;
  return function () {
    //8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作
    if (temp) {
      return;
    } else {
      //4. 如果节流阀为false  立即将节流阀设置为true
      temp = true; //节流阀设置为true
      //5.  开启定时器
      setTimeout(() => {
        //6. 将外部传入的函数的执行放在setTimeout中
        fn.apply(this, arguments);
        //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
        temp = false;
      }, time);
    }
  };
}
function sayHi(e) {
  // 打印当前 document 的宽高
  console.log(e.target.innerWidth, e.target.innerHeight);
}
// 2.绑定事件，绑定时就调用节流函数
// 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
window.addEventListener("resize", throttle(sayHi, 2000));

高效方式实现防抖和节流

使用 Loadash 库实现防抖和节流

lodash 是一个留下的 JavaScript 实用工具库，提供了高效的防抖和节流函数

使用步骤

安装 lodash

`1`	`npm install lodash`

使用防抖和节流

import debounce from "lodash/debounce";
import throttle from "lodash/throttle";

// 防抖示例
const debouncedSearch = debounce(handleSearch, 300);
searchInput.addEventListener("input", debouncedSearch);

// 节流示例
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener("scroll", throttledScroll);

设置合适的时间间隔

防抖和节流的核心在于事件频率控制，因此根据实际场景合理设置时间参数非常关键。过长的延迟可能导致响应不及时，而过短的间隔可能会影响性能提升效果。

通常，防抖的延迟在200ms到500ms之间，节流的时间间隔在100ms到300ms之间。

我写过的

  import _ from 'lodash'
  const loading=ref()
  // 防抖搜索（核心逻辑）
  const handleSearch = _.debounce(async (query) => {
    if (!query) return
    loading.value = true
    try {
      let res;
      // 接口调用
      res = await props.api({ name: query})
    } finally {
      loading.value = false
    }
  }, 300)

js中数组去的常规去重方法

Mon, 14 Oct 2024 00:00:00 +0000

数组去重方法

1. 通过 `filter` 过滤函数

JavaScript 的 Array.prototype.filter() 方法可以创建一个新数组，其包含通过所提供函数实现的测试的所有元素。利用这个特性，我们可以对数组进行去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, self) => {
  return self.indexOf(item) === index;
});
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

2. 通过 `new Set()` 集合进行去重

Set 是 ES6 引入的一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。我们可以利用这个特性进行数组去重。

1
2
3

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

3. `for` 循环遍历判断

虽然 filter 和 Set 是更现代且效率更高的方法，但了解如何使用 for 循环进行去重也很有用。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
  if (uniqueArray.indexOf(array[i]) === -1) {
    uniqueArray.push(array[i]);
  }
}
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]