vueのネットワーク設定方法

Vue は人気のあるフロントエンド開発フレームワークであり、効率的で美しく、保守が容易な Web アプリケーションを Vue を通じて構築できます。 Vue を開発する場合、ネットワーク設定はアプリケーションのユーザー エクスペリエンスと使いやすさに関係するため、重要なリンクとなります。

Vue のネットワーク設定に関しては、次の方法を使用して構成および最適化できます:

1. ネットワーク リクエストに axios を使用します

axios は Promise ベースの HTTP非同期リクエストデータを送信するためのクライアント。 Vue では、axios を使用してネットワーク リクエストを作成し、それに応じて応答データを処理できます。

1. axios をインストールする

npm または Yarn を通じて axios をインストールできます:

npm install axios --save
或
yarn add axios

2. Vue に axios を導入します

Vue に axios をインストールできますimport コマンドを使用して、コンポーネントに axios を導入します:

import axios from 'axios'

3. ネットワーク リクエストを開始します

axios の get または # を使用できます。 ##postネットワーク リクエストを開始する方法:

//GET请求
axios.get('/user?id=123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//POST请求
axios.post('/user', {
    id: 123,
    name: 'Tom',
    age: 18
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2. Vue ネットワーク リクエスト インターセプターをセットアップする

Vue でネットワーク リクエスト インターセプターを使用すると、ネットワーク リクエストを均一に処理し、コードを減らすことができます冗長性。 Vue ネットワーク リクエスト インターセプターは次の方法で設定できます:

1. main.js で設定します

Vue ネットワーク リクエスト インターセプターを main.js に設定します、コードは次のとおりです。 :

import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)
 
axios.interceptors.request.use(config => {
      //拦截请求，并进行相应的处理
    console.log('请求已拦截');
    return config;
}, err => {
    console.log('请求拦截失败');
    return Promise.reject(err);
});

2. Vue コンポーネントでインターセプターを使用する

Vue コンポーネントでネットワーク リクエスト インターセプターを使用することもできます。コードは次のとおりです:

import axios from 'axios'
 
export default {
    data () {
        return {
            users: []
        }
    },
    created () {
        axios.interceptors.request.use(function (config) {
            //拦截请求，并进行相应的处理
            console.log('请求已拦截');
            return config;
        }, function (err) {
            console.log('请求拦截失败');
            return Promise.reject(err);
        });
 
        axios.get('/users')
            .then(response => {
                this.users = response.data
            })
            .catch(error => {
                console.log(error)
            });
    }
}

3. Vue を使用するプラグインからネットワークへのリクエストのキャッシュ

Vue では、プラグインを使用してネットワーク リクエスト データをキャッシュし、ネットワーク リクエストの速度とユーザー エクスペリエンスを向上させることができます。次の方法でネットワーク リクエスト データをキャッシュできます:

1. vue-ls をインストールします

npm またはyarn を介して vue-ls をインストールできます:

npm install vue-ls --save
或
yarn add vue-ls

2 。 main.js の vue-ls

main.js に vue-ls を導入し、キャッシュの関連パラメーターを設定する必要があります。コードは次のとおりです:

import Vue from 'vue'
import VueLS from 'vue-ls'
 
Vue.use(VueLS, options)
 
const options = {
  namespace: 'vuejs__', // key键前缀
  name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
  storage: 'local' // 存储名称: session, local, memory
}

3.ネットワーク リクエスト データをキャッシュするプラグイン

Vue コンポーネントのプラグインを使用して、ネットワーク リクエスト データをキャッシュできます。コードは次のとおりです:

import axios from 'axios'
 
export default {
    data () {
        return {
            users: []
        }
    },
    created () {
        this.users = this.$ls.get('users')
        if (!this.users) {
            axios.get('/users')
                .then(response => {
                    this.users = response.data
                    this.$ls.set('users', this.users, 60 * 60 * 1000) //设置缓存时间为1小时
                })
                .catch(error => {
                    console.log(error)
                });
        }
    }
}

サマリー

ネットワーク設定は Vue 開発にとって重要です リンクの 1 つ。上記の導入により、axios を使用してネットワーク リクエストを作成し、ネットワーク リクエスト インターセプターを使用してネットワーク リクエストを均一に処理し、Vue プラグインを使用してネットワーク リクエスト データをキャッシュし、アプリケーションのユーザー エクスペリエンスと使いやすさを向上させることができます。同時に、独自のニーズに基づいて最適化することもできます。

以上がvueのネットワーク設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。