Amalan terbaik untuk merangkum aksios dalam Vue

Vue ialah salah satu rangka kerja yang paling biasa digunakan dalam pembangunan bahagian hadapan, dan permintaan Ajax adalah bahagian yang sangat kritikal dalam pembangunan bahagian hadapan. Untuk memudahkan pembangun menggunakan, terdapat banyak amalan dalam komuniti Vue yang merangkumi aksios perpustakaan permintaan Ajax. Artikel ini akan memperkenalkan amalan terbaik untuk merangkum aksios dalam Vue dan membantu anda memahami dengan lebih baik cara menggunakan aksios dalam projek Vue.

1. Merangkum aksios

Dalam projek Vue, kita perlu merangkum aksios untuk kegunaan mudah. Berikut ialah pakej axios standard:

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL: process.env.VUE_APP_BASE_API // api请求的baseURL
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前进行token鉴权
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      // 抛出异常信息
      return Promise.reject(new Error(res.message || '错误'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    if (error.response.status === 401) {
      // 跳转到登录页
      router.push({ path: '/login' })
    }
    return Promise.reject(error)
  }
)

export default service

Kod di atas mencipta tika axios dan mengkonfigurasi pemintas permintaan dan tindak balas padanya. Dalam pemintas permintaan, kami boleh mendapatkan token pengguna melalui kedai dan menambahkannya pada pengepala permintaan untuk pengesahan. Dalam pemintas respons, kami mengendalikan pengecualian respons pelayan dan permintaan yang tidak dibenarkan, serta pemprosesan data yang dikembalikan.

2. Merangkum permintaan http

Apabila menggunakan axios, kita biasanya perlu merangkum lagi permintaan http untuk pengurusan bersatu. Di bawah ini kami mencipta pembungkus untuk pelbagai permintaan http.

dapatkan permintaan:

import http from '@/utils/http'

export default {
    get(url, params) {
        return http.get(url, {
            params: params
        })
    }
}

permintaan pos:

import http from '@/utils/http'

export default {
    post(url, data) {
        return http.post(url, data)
    }
}

padam permintaan:

import http from '@/utils/http'

export default {
    delete(url) {
        return http.delete(url)
    }
}

letak permintaan:

import http from '@/utils/http'

export default {
    put(url, data) {
        return http.put(url, data)
    }
}

melalui pakej di atas , kami boleh terus memanggil kaedah yang sepadan apabila menggunakan permintaan http.

3. Menggunakan

dalam projek Vue Untuk menggunakan axios terkapsul dan permintaan http dalam projek Vue, anda perlu melakukan perkara berikut:

Pertama, kita perlu Perkenalkan axios dan permintaan http yang dikapsulkan dalam fail main.js:

import axios from 'axios'
import http from '@/utils/http'

Vue.prototype.$axios = axios
Vue.prototype.$http = http

Kedua, gunakannya dalam komponen:

import api from '@/api/api'

export default {
  name: 'Demo',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {
        // 请求参数
      }
      api.get('/data', params).then(res => {
        console.log(res)
        this.dataList = res.data
      })
    }
  }
}

Di sini kami memperkenalkan permintaan http berkapsul api dan menggunakannya dalam hayat terpasang Semasa kitaran, kaedah getData dipanggil untuk memulakan permintaan http, dan hasilnya akhirnya dipaparkan pada halaman.

4. Kesimpulan

Artikel ini memperkenalkan amalan terbaik untuk merangkum aksios dalam Vue. Bagi pembangun yang baru menggunakan Vue, teknik ini boleh dipelajari dan difahami dengan mudah, dan juga boleh memainkan peranan yang lebih besar dalam pembangunan sebenar.

Atas ialah kandungan terperinci Amalan terbaik untuk merangkum aksios dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!