Encapsulación del proyecto Vue Axios [práctica del proyecto Vue.js: sistema de autoverificación COVID-19]

Documentos de diseño y desarrollo web del sistema de autodetección COVID-19

El primer proyecto de Sylvan Ding basado en Vue.js. La información proporcionada en este proyecto es solo de referencia y no se garantiza la exactitud, validez, puntualidad e integridad de la información. Para obtener más información, consulte la Comisión Nacional de Salud y Salud. ¡sitio web!
Explore los documentos »

Ver demostración · Informar error · Solicitar función

El proyecto Vue encapsula Axios

Durante el proceso de desarrollo, Axios necesita encapsularse aún más para facilitar su uso en el proyecto, lo que tiende a reducir la duplicación de código.

entorno de desarrollo

nodo	14.16.1
npm	8.18.0
ver-cli	2.9.6
vista	2.5.2

solución

Para evitar contaminar el Axios global y afectar otras solicitudes cuando se modifica una solicitud, utilizamos src/utils/requests.jspara crear una nueva instancia de axios con una configuración personalizada. Puede cambiar diferentes URL base según los diferentes entornos. Y todos los simulacros de JSON utilizados por Axios en el entorno de desarrollo se han incluido static/mock/*.jsoncon el fin de mantener la estructura de archivos original de la web, lo que le permite acceder a ellos mediante archivos http://localhost:8080/static/mock/*.json.

Cuando usamos Axios para obtener datos y cargarlos en componentes de Element UI, importamos request.jsy creamos funciones loadData()en métodos de Vue, luego llamamos a este método en la función de enlace mounted():

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      request.get('/to/mock/file.json').then((response) => {
        this.tableData = response.data
      })
    },
  },
}
</script>

src/utils/requests.js:

import {
    
     errorMsg } from '@/utils/msgsettings.js'
const axios = require('axios')
const qs = require('qs')

const prodBaseURL = 'http://localhost:5000'

let axiosConfig = {
    
    
  timeout: 3000,
  // `transformRequest` allows changes to the request data before it is sent to the server
  // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
  // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
  // FormData or Stream
  // You may modify the headers object.
  transformRequest: [
    function(data, headers) {
    
    
      // Do whatever you want to transform the data
      headers['content-type'] = 'application/x-www-form-urlencoded'
      data = qs.stringify(data)
      return data
    },
  ],
}

// set baseURL under production environment
if (process.env.NODE_ENV === 'production') {
    
    
  axiosConfig.baseURL = prodBaseURL
}

const instance = axios.create(axiosConfig)

// Add a request interceptor
instance.interceptors.request.use(
  function(config) {
    
    
    // Do something before request is sent
    return config
  },
  function(error) {
    
    
    // Do something with request error
    errorMsg(error)
    return Promise.reject(error)
  }
)

// Add a response interceptor
instance.interceptors.response.use(
  function(response) {
    
    
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    console.log(response)
    return response
  },
  function(error) {
    
    
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    errorMsg(error)
    console.log(error)
    return Promise.reject(error)
  }
)

export default instance

Indique la fuente al reimprimir: ©️ Sylvan Ding 2022