Vue + Axios グローバル インターフェイス アンチシェイク、スロットリング パッケージの実装により、フロントエンド開発の効率が向上します。

プログラミング 2023-06-04 19:12:26 訪問数: null

表紙.png

フロントエンド開発でデータリクエストAjaxを行う? この問題を解決するには、インターフェイスをデバウンスしてスロットルする必要があります。

この記事では、インターフェース上で手ぶれ補正やスロットリング処理を行う方法やVue使い方。Axiosはじめましょう！

インターフェイスの手ぶれ補正とスロットリングとは何ですか?

インターフェイスの揺れ防止とスロットルは、Web サイトのパフォーマンス最適化ソリューションの重要なコンポーネントの 1 つです。簡単に言うと、アンチシェイクは一定期間に 1 回だけ機能を実行することを意味し、スロットリングは一定期間に 1 回だけ機能を実行することを意味します。

フロントエンド開発では、インターフェイスの揺れ防止とスロットルによって、ネットワーク リクエストとサーバーの負荷を効果的に軽減できます。手ぶれ補正コードとスロットル コードを記述することにより、フロントエンド ページのリクエストが多すぎないようにできるため、Web ページの読み込みが速くなり、より敏感に応答できるようになります。

Vue + Axios は、グローバル インターフェイスのアンチシェイクとスロットル設定をカプセル化します。

Vue では、グローバルaxiosインスタンス。次に、手ぶれ補正機能とスロットル機能を実現するための要件に応じてaxios例を。

手ぶれ補正

手ぶれ補正を実装する前に、まず「手ぶれ補正」とは何かについてご紹介します。フロントエンド開発では、「アンチシェイク」とは、一定期間内に 1 回だけトリガーできるイベント (通常は入力ボックスまたはスクロール イベント) を指します。手ぶれ補正がない場合、検索ボックスの入力が速すぎる、スクロール バーが頻繁にジャンプするなど、ページに異常な状況が表示されます。

実現原理

手ぶれ補正の実装原理は非常にシンプルで、実行する関数を遅らせることで関数の実行回数を制御するというものです。具体的なプロセスは次のとおりです。

  1. タイマーを保持する変数を定義します。
  2. 関数が実行される前にタイマーが存在するかどうかを確認し、存在する場合はタイマーをクリアします。
  3. 関数の遅延時間を設定し、戻り結果をタイマー変数に保存します。
  4. 待ち時間が設定したしきい値を超えた後、対応するコールバック関数を実行します。

手ぶれ補正コードの例を次に示します。

// 防抖
function debounce(fn, delay = 500) {
  let timer = null;
  return function(...args) {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}
复制代码

予防

手ぶれ補正技術を使用する場合は、次の点に注意してください。

  1. 遅延時間はビジネス ニーズに応じて調整する必要があります。
  2. 手ぶれ補正プロセス中に、関数パラメーターが正しく渡されていることを確認してください。

スロットリング

相比于防抖技术，节流技术更加灵活。在前端开发中，“节流”通常指的是在一定时间内只能执行一次事件，例如：下拉加载更多、页面滚动等。

实现原理

节流技术的实现原理也非常简单，就是通过设置一个固定时间间隔，在这个时间间隔内只能执行一次相应的回调函数。具体流程如下：

  1. 定义一个变量用于保存上一次执行函数的时间。
  2. 在执行函数前获取当前的时间戳。
  3. 判断当前时间与上一次执行时间是否大于设定的间隔时间，如果大于，则执行相应的回调函数，并更新上一次执行时间。
  4. 如果小于设定的间隔时间，则等待下一次执行。

下面是节流代码的示例：

// 节流
function throttle(fn, delay = 500) {
  let last = 0;
  return function(...args) {
    let now = new Date().getTime();
    if (now - last > delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}
复制代码

注意事项

在使用节流技术的时候，需要注意以下几点：

  1. 时间间隔需要根据业务需求进行调整。
  2. 在节流过程中，要确保函数参数传递正确。
  3. 节流过程中可能会出现滞后或者丢失部分事件的问题，需要进行相应的处理。

封装axios实例

在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口请求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。

首先，我们需要安装 axios 插件：

npm install axios --save
复制代码

然后，在 main.js 中添加以下代码：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios
复制代码

接下来，我们将编写一个封装函数，用于通过 axios 实例对接口进行防抖和节流处理。

防抖处理

在防抖处理中，我们需要考虑以下几个方面：

  1. 将 axios 实例封装为一个函数。
  2. 在函数调用时进行防抖处理。

下面是封装 axios 实例的示例代码：

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

  // 防抖
  const debounceTokenCancel = new Map()
  instance.interceptors.request.use(config => {
    const tokenKey = `${config.method}-${config.url}`
    const cancel = debounceTokenCancel.get(tokenKey)
    if (cancel) {
      cancel()
    }
    return config
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  return instance(config)
}

export default request
复制代码

在上述代码中，我们创建了一个 axios 实例，并对该实例进行了防抖处理。其中，debounceTokenCancel 变量用于保存每个请求的计时器对象。在拦截器中，我们通过判断 debounceTokenCancel 中是否存在相应的 key，来决定是否清除计时器和重新设置计时器。

节流处理

在节流处理中，我们需要考虑以下几个方面：

  1. 将 axios 实例封装为一个函数。
  2. 在函数调用时进行节流处理。

下面是封装 axios 实例的示例代码：

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

  // 节流
  let lastTime = new Date().getTime()
  instance.interceptors.request.use(config => {
    const nowTime = new Date().getTime()
    if (nowTime - lastTime < 1000) {
      return Promise.reject(new Error('节流处理中，稍后再试'))
    }
    lastTime = nowTime
    return config
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  return instance(config)
}

export default request
复制代码

上記のコードでは、axios のインスタンスを作成し、そのインスタンスを調整します。このうち、lastTime変数は最後のリクエストの時間を保存するために使用されます。インターセプターでは、現在の時刻と最後のリクエストの時刻を比較して、スロットルするかどうかを決定します。

完全な例

以下は、手ぶれ補正とスロットリングを含む完全なサンプル コードです。

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

// 防抖
const debounceTokenCancel = new Map()
instance.interceptors.request.use(config => {
  const tokenKey = `${config.method}-${config.url}`
  const cancel = debounceTokenCancel.get(tokenKey)
  if (cancel) {
    cancel()
  }
  return new Promise(resolve => {
    const timer = setTimeout(() => {
      clearTimeout(timer)
      resolve(config)
    }, 800)
    debounceTokenCancel.set(tokenKey, () => {
      clearTimeout(timer)
      resolve(new Error('取消请求'))
    })
  })
}, error => {
  console.log(error)
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  return response
}, error => {
  console.log(error)
  return Promise.reject(error)
})

// 节流
let lastTime = new Date().getTime()
instance.interceptors.request.use(config => {
  const nowTime = new Date().getTime()
  if (nowTime - lastTime < 1000) {
    return Promise.reject(new Error('节流处理中，稍后再试'))
  }
  lastTime = nowTime
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

return instance(config)
}

export default request
复制代码

上記のコードでは、axios インスタンスを作成し、そのインスタンスをデバウンスおよびスロットルします。このうち、debounceTokenCancel変数は各リクエストのタイマー オブジェクトを保存するために使用され、lastTime変数は最後のリクエストの時間を保存するために使用されます。

結論は

フロントエンド開発では、インターフェイス上の手ぶれ補正とスロットル処理により、ネットワーク リクエストとサーバーの負荷を効果的に軽減し、Web サイトのパフォーマンスを向上させることができます。この記事では、Vue と Axios を使用してインターフェイスの揺れ防止とスロットリングを行う方法を紹介し、実装原理と注意点を詳しく紹介しました。この記事が開発作業をより適切に完了するのに役立つことを願っています。

おすすめ

転載: juejin.im/post/7225133152490160187
おすすめ
米国は中国とロシアへの大型AIモデルの輸出を制限する計画
Apple、ChatGPTをiPhoneに導入することでOpenAIと合意に達する
ランキング
エコー、Linuxは最も悲しいコマンドです
OpenCVの目標追跡 - 黄Chaoxian
インターバルマージ [ペア、ソート]
Javaの8並行プログラミング
時間を[行く]包
2つのソリューションCSS揃えテキスト
ASP.NET MVCのコアアプリケーションのバックグラウンドタスク
JAVAのドキュメントは、カスタムプロパティを記述する
オーディオとビデオに基づくビデオの主なコンセプト
phpstudyバックドアRCE使用バッチスクリプト
アーカイブ
もっと
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

コードワールド

© 2018 codetd.com