> 今日问题：防止接口重复调用的前端解决方案。




**Q：在前端面试中，如果被问到，接口防止重复调用的前端解决方案都有哪些，什么回答比较好，全面、具体一些，尽量描述出所有细节和实现方案，给出必要的代码示例。**

**A：在前端面试中，谈论接口防止重复调用的解决方案时，可以从以下几个方面进行全面而具体的讨论：**


1. **防抖**: 这种方法适用于防止连续快速的点击事件导致的重复调用。通过设置一个延迟时间，在这个时间内如果再次触发事件，则重新计时。

```js
// 使用lodash的debounce函数来实现防抖
import _ from 'lodash';

function fetchData() {
  // 触发请求的函数
}

// 防抖函数，等待300ms后执行
const debouncedFetchData = _.debounce(fetchData, 300);

// 在事件处理函数中使用
button.addEventListener('click', debouncedFetchData);
```

2. **节流**: 与防抖类似，节流是确保函数在一定时间内只执行一次。这适用于例如滚动事件，确保在滚动过程中不会发送太多的调用请求。

```js
// 使用lodash的throttle函数来实现节流
import _ from 'lodash';

function fetchData() {
  // 触发请求的函数
}

// 节流函数，每1000ms内最多执行一次
const throttledFetchData = _.throttle(fetchData, 1000);

// 在事件处理函数中使用
button.addEventListener('click', throttledFetchData);
```

3. **采用禁用按钮的方式**：禁用按钮：在发送请求之前，禁用按钮（利用loading或者disabled属性），直到请求完成后再启用它。这可以防止用户在请求进行中多次点击按钮。

```html
<div id="app">    
    <button @click="sendRequest" :loading="loading">请求</button>
 </div>
 
 methods: {    
     async sendRequest() {      
         this.loading = true; // 禁用按钮      
         try {        // 发送请求        
             await yourApiRequestFunction();        // 请求成功后，启用按钮      
         } catch (error) {        // 处理错误情况      } 
         finally {        
             this.loading = false; // 请求完成后，启用按钮      
         }    
     },  
 }
```

4. **利用axios取消接口的api**: axios 内部提供的 CancelToken 来取消请求，通过axios请求拦截器,在每次请求前把请求信息和请求的取消方法放到一个map对象当中,并且判断map对象当中是否已经存在该请求信息的请求,如果存在取消上次请求。

```js
const pendingRequest = new Map();

function generateReqKey(config) {
    const { method, url, params, data } = config;
    return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}

function addPendingRequest(config) {
    const requestKey = generateReqKey(config);
    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
        if (!pendingRequest.has(requestKey)) {
            pendingRequest.set(requestKey, cancel);
        }
    });
}

function removePendingRequest(config) {
    const requestKey = generateReqKey(config);
    if (pendingRequest.has(requestKey)) {
        const cancelToken = pendingRequest.get(requestKey);
        cancelToken(requestKey);
        pendingRequest.delete(requestKey);
    }
}

// axios拦截器代码
axios.interceptors.request.use(
    function (config) {
        removePendingRequest(config); // 检查是否存在重复请求，若存在则取消已发的请求
        addPendingRequest(config); // 把当前请求信息添加到pendingRequest对象中
        return config;
    },
    (error) => {
        return Promise.reject(error);`
    }
);
axios.interceptors.response.use(
    (response) => {
        removePendingRequest(response.config); // 从pendingRequest对象中移除请求
        return response;
    },
    (error) => {
        removePendingRequest(error.config || {}); // 从pendingRequest对象中移除请求
        if (axios.isCancel(error)) {
            console.log("已取消的重复请求：" + error.message);
        } else {
            // 添加异常处理
        }
        return Promise.reject(error);
    }
);

```



5. **状态标志**: 使用变量记录请求的状态。在请求开始时设置为true，请求结束后设置为false。在此期间，如果状态为true，则阻止新的请求。

```js
let isFetching = false;

function fetchData() {
  if (isFetching) return;
  isFetching = true;
  
  // 发起请求
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      isFetching = false;
    })
    .catch(() => {
      isFetching = false;
    });
}

button.addEventListener('click', fetchData);
```

6. **请求缓存**: 对于相同的请求，可以缓存结果。当再次遇到相同的请求时，直接从缓存中获取结果，而不是重新调用接口。

```js
const cache = {};

function fetchData(params) {
  const key = JSON.stringify(params);
  if (cache[key]) {
    return Promise.resolve(cache[key]);
  }
  
  return fetch('/api/data', { params })
    .then(response => response.json())
    .then(data => {
      cache[key] = data;
      return data;
    });
}
```

7. **请求队列**: 将请求放入队列中，一次只处理一个请求。完成一个请求后，再从队列中取出下一个请求进行处理。

```js
const requestQueue = [];
let isProcessing = false;

function processQueue() {
  if (isProcessing || !requestQueue.length) return;
  isProcessing = true;
  
  const { url, params, resolve, reject } = requestQueue.shift();
  
  fetch(url, { params })
    .then(response => response.json())
    .then(data => {
      resolve(data);
      isProcessing = false;
      processQueue();
    })
    .catch(error => {
      reject(error);
      isProcessing = false;
      processQueue();
    });
}

function fetchData(url, params) {
  return new Promise((resolve, reject) => {
    requestQueue.push({ url, params, resolve, reject });
    processQueue();
  });
}
```


8. **请求标识**: 为每个请求生成一个唯一标识符，如果检测到相同的标识符，则阻止该请求。

```js
const pendingRequests = new Set();

function fetchData(url, params) {
  const key = `${url}_${JSON.stringify(params)}`;
  if (pendingRequests.has(key)) {
    return Promise.reject(new Error('Duplicate request'));
  }
  
  pendingRequests.add(key);
  
  return fetch(url, { params })
    .then(response => response.json())
    .then(data => {
      pendingRequests.delete(key);
      return data;
    })
    .catch(error => {
      pendingRequests.delete(key);
      throw error;
    });
}
```


9. **客户端存储**: 利用本地存储（如localStorage）来记录已发送的请求和它们的参数，以避免在短时间内发送相同的请求。

```js
function fetchData(url, params) {
  const key = `fetch_${url}_${JSON.stringify(params)}`;
  const cachedData = localStorage.getItem(key);
  
  if (cachedData) {
    return Promise.resolve(JSON.parse(cachedData));
  }
  
  return fetch(url, { params })
    .then(response => response.json())
    .then(data => {
      localStorage.setItem(key, JSON.stringify(data));
      return data;
    });
}
```

10. **Promise对象**: 利用Promise对象来控制异步操作，确保在前一个请求未完成前，不会发起新的请求。

```js
let fetchPromise = null;

function fetchData() {
  if (fetchPromise) return fetchPromise;
  
  fetchPromise = fetch('/api/data')
    .then(response => response.json())
    .finally(() => {
      fetchPromise = null;
    });
  
  return fetchPromise;
}
```


这些示例提供了不同策略的实现方式，可以根据具体需求进行选择和调整。

防止接口重复调用的前端解决方案

> 今日问题：Vue中style的scoped是如何实现样式隔离的。




**Q：在前端面试中，如果被问到，vue文件中的scoped是如何实现样式格式的，什么回答比较好，全面、具体一些，尽量描述出所有细节。**

**A：在`Vue`中，`<style>`标签的`scoped`属性用于实现样式的封装。当你在一个组件的`<style>`标签中添加`scoped`属性时，这些样式只会应用到当前组件的元素，而不会影响到其他组件。**

这是通过`Vue Loader`和`PostCSS`转换来实现的。具体来说，`Vue Loader`会为每个带有`scoped`属性的`<style>`标签中的`CSS`选择器添加一个独特的属性（例如`data-v-f3f3eg9`），这个属性是随机生成的，以确保它是唯一的。然后，`Vue Loader`会将这个属性添加到组件模板中所有的元素上。这样，`CSS`选择器就只能匹配那些带有相应属性的元素，从而实现样式的封装。

例如，如果你有以下的`Vue`组件：

```html
<template>
  <div class="example">Hello</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>
```
`Vue Loader`会将其转换为：

```html
<template>
  <div class="example" data-v-f3f3eg9>Hello</div>
</template>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
```

这样`.example`类只会应用到带有`data-v-f3f3eg9`属性的`<div>`元素上。


还有一些需要注意的点：

- 如果你需要全局样式，可以在没有scoped属性的`<style>`标签中定义它们。
- 如果你需要深度选择器来影响子组件，可以使用`>>>`、`/deep/`或`::v-deep`操作符。
- 动态生成的内容（例如通过`v-html`）不会受到`scoped`样式的影响，但可以通过深度选择器来样式化。
- 使用`scoped`时，最好使用类或`ID`选择器，因为与属性选择器结合使用时，性能可能会受到影响。

在面试中，你可以使用上述信息来全面而具体地解释`scoped`属性是如何工作的。


**Q：这个独特的属性，例如data-v-f3f3eg9，生成规则是这么样的，是如何保证不重复的**

**A：在`Vue`中，每个带有`scoped`属性的`<style>`标签的独特属性（例如`data-v-f3f3eg9`）是通过`Vue Loader`在构建过程中生成的。这个属性是一个基于组件文件内容的哈希值，确保了它的唯一性。这意味着，即使你有多个相同的组件实例，每个实例的哈希值也会不同，因为它们在内存中的位置不同。**

这个哈希值是由以下几个因素决定的：

1. 组件的相对文件路径。
2. 组件文件的内容。

`Vue Loader`会结合这些信息来生成一个短哈希字符串，并将其作为属性添加到组件模板中的所有元素上。这样，即使在大型项目中，也能保证每个组件的样式都是独立且不会冲突的。

这个机制类似于`CSS Modules`的工作方式，它也是通过生成唯一的类名来避免样式冲突的。

在面试中，你可以提到`Vue Loader`使用文件路径和内容生成哈希值，以及这个机制如何保证样式的独立性和不重复性。这样的回答可以展示你对`Vue`的构建过程和样式封装机制有深入的理解。

Vue中style的scoped是如何实现样式隔离的

> 今日问题：Vue中key的作用？




Q：如果在前端面试中，被问到Vue中key的作用是什么，怎么回答最全面

A：在前端面试中，如果被问到Vue中key的作用，你可以这样全面回答：

在`Vue`中，`key`属性是一个特殊的内置属性，它在虚拟`DOM`的算法中起着至关重要的作用。为了详细解释`key`的作用，我们需要先理解`Vue`的更新机制。

`Vue`使用虚拟`DOM`来提高应用的性能。虚拟`DOM`是对真实`DOM`的抽象表示，它允许`Vue`在内存中进行计算，而不是直接操作`DOM`。当数据发生变化时，`Vue`会生成一个新的虚拟`DOM`树，并将其与旧的虚拟`DOM`树进行比较，这个过程称为`“diff”`。通过这种方式，`Vue`可以确定哪些部分需要更新，从而减少对真实`DOM`的操作，提高效率。

在这个`diff`过程中，`key`发挥了重要作用。如果没有`key`，`Vue`会尽可能地复用现有元素，这种就地修改策略虽然在某些情况下可以提高性能，但也可能导致一些问题，比如不正确的数据绑定和子组件状态的混乱。而当提供了`key`时，`Vue`可以更准确地识别和跟踪每个节点，确保节点的身份和状态得到正确的维护。

以下是`key`的一些主要作用和优势：

1. **节点身份的稳定性**：当你使用`v-for`指令渲染列表时，为每个列表项提供一个唯一的`key`可以帮助`Vue`跟踪每个节点的身份。这对于维护子组件的状态和避免不必要的`DOM`操作非常重要。
2. **高效的列表渲染**：在列表渲染中，如果列表项的顺序发生变化，`Vue`可以使用`key`来匹配节点，从而有效地重用和重新排序现有元素，而不是销毁和重新创建所有节点。
3. **强制更新**：在某些情况下，即使数据没有变化，你可能需要强制重新渲染组件。通过改变key值，你可以告诉Vue销毁旧节点并创建新节点，从而实现强制更新。
4. **过渡动画**：当使用`<transition>`组件时，`key`的变化可以触发过渡动画。`Vue`会认为拥有不同`key`的元素是完全不同的，因此会应用过渡效果。
5. **避免错误的复用**：如果不使用`key`，`Vue`可能会错误地复用节点，导致一些难以追踪的`bug`。例如，如果你有一个输入框列表，用户在输入框中输入了一些内容，然后你更新了列表的顺序，没有`key`的情况下，`Vue`可能会保持输入框的内容不变，这会导致用户的输入与数据模型不同步。
6. **提高性能**：正确使用`key`可以避免不必要的`DOM`操作，从而提高应用的性能。特别是在大型列表和频繁更新的场景中，`key`的作用尤为明显。

在实践中，`key`的值通常是数据项的唯一标识符，如`ID`或`UUID`。不建议使用数组索引作为`key`，因为这会在数据项顺序变化时导致性能问题和潜在的`bug`。

总之，`key`是`Vue`中一个非常重要的属性，它通过确保节点的稳定性和身份，帮助`Vue`更高效、更准确地更新视图。在面试中详细地解释`key`的这些作用和优势，可以展示出你对`Vue`内部机制的深入理解。

Vue中key的作用

> 2024年2月份，对于参与加密市场的人来说，是so crazy的一个月，BTC单月涨幅44%，历史罕见。其它代币表现也不俗，这也是我收益率也是最高的一个月42.72%。




先说下结果，2月份我的收益率42%+，比特币涨幅44%+。

![image.png](https://creatorblog.cn/static/img/f58fc83a80b0596ee449ef511d5a9f7c.image.webp)

比特币凭借在春节期间和2月底的疯狂上涨后，已达到6.2w美元一枚，距离历史最高价6.9w美元近在咫尺。但是如果换一个计价单位，无论是RMB还是欧元、日元，比特币的价格早就突破了历史最高价。这主要是美联储最近一年的疯狂加息有关，所以，说比特币目前已达到甚至突破历史最高价毫不为过。

2月份能跑赢比特币的主流山寨币并不多，市场出现了极端的吸血和抱团效应，资金都在流入比特币。而山寨币大部分都在等待市场资金轮动。

我的持仓里是没有比特币的，所以这个月我能跑平比特币的收益率很欣慰，也引发了很多思考。


![997d0e4486e7d31b52066e307ea49f4.jpg](https://creatorblog.cn/static/img/85f41719c85155b4a981c02b35f8783f.997d0e4486e7d31b52066e307ea49f4.webp)

很羡慕那些在2月份持有比特币的人，因为他们不需要做太多的操作，躺平喝茶就可以跑赢大部分人。而我持有的山寨币却做了大量的操作，做T，做对冲，才得到跑平比特币收益的结果。

大部分人投资山寨币而不选择比特币的原因，就是觉得比特币太平稳了，涨跌幅度都有限，而山寨币却可以动不动就翻倍。

这句话其实没问题，纵观历史，每轮牛市，都是比特币率先领涨，拉到一个很高的高度后，横盘。然后才是山寨币横飞的时间，所以持有山寨币且收益率尚不足比特币的先不用慌，只要你选择的标的没问题，耐心等待即可。

持有山寨币的人最怕看到的一幕就是，比特币涨，自己的币微涨，比特币跌，自己的币大跌。不要奇怪，还是生活常态。

只要比特币插针，几乎所有的山寨币都会在同一时刻插针，我分析这应该是量化导致的，如果行情还不错的前提下，可以选择在这种时刻捡一些便宜的筹码。比如2月29日凌晨1点，比特币在24小时内连续上涨10几个点后，在15分钟内突然跌了2.96%，振幅4.35%。同一时刻，其它山寨币基本都插针跌了20个点以上。这是非常不应该有的过激反应，很明显是触发了一些量化的卖出机制。所以这个时刻可以选择捡一些低价的山寨，因为大盘是非常好的。

今年比特币的行情是很意外的，市场基本上认为目前还是一个牛初的阶段，并没有正式迈入牛市，但是比特币的价格已经基本逼近历史新高了。这会导致两种结果，要么接下来是一个超级大牛市，走向10w美元20w美元。要么接下来几个月会大幅度回调，再次看到4甚至3开头的比特币。

目前我的仓位已经根据获利情况减了差不多半仓，我会选择在30%涨幅左右开始减仓获利，在50%左右涨幅的时候考虑全部卖出。

比特币可以在一个月内涨40多个点，也可以在两三天内跌40多个点（甚至在一天内），所以要在收益可观的前提下落袋为安。

对于后市的走势，我的建议是：

1. 不要满仓，也不要空仓，不要赌比特币一定会大幅度回调。
2. 不要太着急下车，山寨币时间到的时候，涨幅是看不懂的，几天就可以翻倍。也不要不下车，适当根据自己的仓位的浮盈选择性减仓获利。
3. 做好比特币回调的准备，4月份会迎来比特币的减半事件，历史上每次减半前后比特币都会有比较大幅度的调整。（不是刻舟求剑，手里有大量筹码的那些人也会参考这些历史可观事实来做操作避险）
4. 基本面好的山寨币可以选择逢低买入，即使比特币大回调，套住的时间也不会久，未来推动市场上涨的催化剂很多，牛初不怕套。
5. 不要贸然做空，现在的行情敢大杠杆做空的都是狠人，我的建议是如果要做空也要在10x以下，时间线选择小时级别的。


很期待这轮牛市，按这样的收益率发展，退休自由的时间越来越近了。

加密市场2月份收益总结

> 今日问题：函数柯里化




Q：如果在前端面试中，被问到函数柯里化，怎么回答最全面，给出必要的代码示例

A：函数柯里化是一种函数式编程的技术，它可以将接受多个参数的函数转换为一系列接受单个参数的函数的链式调用。这种技术使得函数更加灵活，并且可以简化函数的调用方式。以下是关于函数柯里化的全面回答以及相应的代码示例：

**定义：**

函数柯里化（Currying）是一种将多参数函数转换为一系列单参数函数的过程，使得函数变得更加灵活且易于组合。

**用途：**

1. **参数复用**：通过柯里化，可以提前传递一部分参数，生成一个新的函数，后续调用这个新函数时只需传递剩余的参数。
2. **延迟执行**：柯里化可以用来延迟执行函数，直到所有参数都被传递完毕。

**优点：**

1. 代码复用：柯里化可以提高函数的复用性，尤其是在参数固定的场景下。
2. 增强函数的灵活性：可以将一个接受多个参数的函数，转换为接受单个参数的函数链，使得函数更加灵活。

**实现方式：**

1. 手动实现柯里化：

```js
function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) {
      return func.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

// 示例用法
function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出 6
console.log(curriedAdd(1, 2)(3)); // 输出 6
console.log(curriedAdd(1)(2, 3)); // 输出 6
```

2. 使用函数库实现柯里化（比如 Lodash）：

```js
const _ = require('lodash');

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = _.curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出 6
console.log(curriedAdd(1, 2)(3)); // 输出 6
console.log(curriedAdd(1)(2, 3)); // 输出 6

```

函数柯里化

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！