kaedah tetapan rangkaian vue

Vue ialah rangka kerja pembangunan bahagian hadapan yang popular. Aplikasi web yang cekap, cantik dan mudah diselenggara boleh dibina melalui Vue. Apabila membangunkan Vue, tetapan rangkaian adalah pautan penting kerana ia berkaitan dengan pengalaman pengguna dan kebolehgunaan aplikasi.

Dari segi tetapan rangkaian Vue, kami boleh mengkonfigurasi dan mengoptimumkannya dengan cara berikut:

1 Gunakan axios untuk permintaan rangkaian

axios ialah HTTP berasaskan Promise. pelanggan untuk menghantar data permintaan tak segerak. Dalam Vue, kami boleh menggunakan axios untuk membuat permintaan rangkaian dan memproses data tindak balas dengan sewajarnya.

1. Pasang axios

Kami boleh memasang axios melalui npm atau yarn:

npm install axios --save
或
yarn add axios

2. Perkenalkan axios dalam Vue

Kami boleh memasang axios dalam Vue. Gunakan perintah import dalam komponen untuk memperkenalkan axios:

import axios from 'axios'

3. Mulakan permintaan rangkaian

Kita boleh menggunakan kaedah get atau post axios untuk memulakan rangkaian permintaan:

//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. Sediakan pemintas permintaan rangkaian Vue

Menggunakan pemintas permintaan rangkaian dalam Vue boleh memproses permintaan rangkaian secara seragam dan mengurangkan lebihan kod. Kami boleh menetapkan pemintas permintaan rangkaian Vue dengan cara berikut:

1 Set

dalam main.js Kami menetapkan pemintas permintaan rangkaian Vue dalam main.js, kodnya adalah seperti berikut:

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. Gunakan pemintas dalam komponen Vue

Kami juga boleh menggunakan pemintas permintaan rangkaian dalam komponen Vue Kodnya adalah seperti berikut:

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. ins to network Minta caching

Dalam Vue, kami boleh menggunakan pemalam untuk cache data permintaan rangkaian untuk meningkatkan kelajuan permintaan rangkaian dan pengalaman pengguna. Kami boleh menyimpan data permintaan rangkaian dengan cara berikut:

1 Pasang vue-ls

Kami boleh memasang vue-ls melalui npm atau yarn:

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

2 .Perkenalkan. vue-ls dalam main.js

Kami perlu memperkenalkan vue-ls dalam main.js dan menetapkan parameter cache yang berkaitan adalah seperti berikut:

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 pemalam ke Caching data permintaan rangkaian

Kami boleh menggunakan pemalam untuk cache data permintaan rangkaian dalam komponen Vue Kodnya adalah seperti berikut:

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)
                });
        }
    }
}

Ringkasan

. Tetapan rangkaian adalah penting untuk pembangunan Vue Salah satu pautan. Melalui pengenalan di atas, kami boleh menggunakan axios untuk membuat permintaan rangkaian, menggunakan pemintas permintaan rangkaian untuk memproses permintaan rangkaian secara seragam, dan menggunakan pemalam Vue untuk cache data permintaan rangkaian untuk meningkatkan pengalaman pengguna dan kebolehgunaan aplikasi. Pada masa yang sama, kami juga boleh mengoptimumkan sewajarnya berdasarkan keperluan kami sendiri.

Atas ialah kandungan terperinci kaedah tetapan rangkaian vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!