Axios solicita encapsulación de Vue (versión modificada)

Cuando usamos Vue para desarrollar nuestros proyectos, es probable que se use router, y se puede usar vuex, pero definitivamente lo usaremos axios. Para los principiantes, básicamente lo usamos y main.jslo importamos directamente. Pero cuando realmente estamos haciendo proyectos, todos necesitamos axiosencapsular solicitudes, por ejemplo, nuestras solicitudes deben ser llevadas a cabo token, o tenemos múltiples entornos: como entorno de prueba, entorno de desarrollo, etc.
Aquí registramos principalmente axiosla encapsulación simple. .

1. Etapa de preparación

Proyecto de inicialización

⭐ La instalación de Vue no se discutirá aquí. Recreemos un Vueproyecto para comenzar.

Vue create my-project

cd my-project # 进入项目目录
yarn # 安装依赖，也可以使用 npm install
yarn serve # 启动项目

Instalar axios

⭐Una vez creado el proyecto, comenzamos la instalación axios.

yarn add axios -S

-D: abreviatura de --save-dev, el módulo escribe en devDependenciesel objeto.

devDependenciesLos objetos son algunos paquetes que necesitamos usar durante el desarrollo. Solo se usan en la fase de desarrollo. Estos paquetes no son necesarios cuando el paquete se pone en línea, porque estas herramientas solo las usa usted para empaquetar el código.

-S: abreviatura de --save, el módulo escribe en dependenciesel objeto.

Si necesita publicarlo en el entorno de producción, por ejemplo, si desea ejecutar un vueproyecto basado en vue.js, debe vue.jsadmitirlo. El archivo vue.js debe seguir el proyecto hasta el entorno de producción final.

2. Introducción de axios

Introducción sencilla

axios⭐ Como se mencionó anteriormente, podemos usarlo directamente después de la instalación .

Importar axios en main.js

import axios from 'axios'
// 全局挂载
Vue.prototype.$axios = axios
// 设置默认路由前缀
axios.defaults.baseURL = 'http://localhost:8080'
new Vue({
      
      
    axios,
    router,
    store,
    render: h => h(app)
}).$mount('#app')

.vueusar en el archivo

<script>
    methods:{
        Login () {
            this.$axios({
                url:'/login',
                method: 'post',
                data:{
                    userName:'xxxx',
                    password:'xxxx'
                }
            }).then((res)=>{
                console.log(res)
            })
        }
    }
</script>

3. Encapsular la solicitud de axios

⭐ No main.jsimportamos en .

1. Configure las direcciones base de la interfaz requeridas para diferentes entornos en el directorio raíz

.env archivo de configuración global predeterminado, que se cargará y fusionará independientemente del entorno.
.env.development Archivo de configuración en el entorno de desarrollo
.env.production Archivo de configuración en entorno de producción
.env.local configuración del entorno de desarrollo local

Reglas de nomenclatura:

El nombre del atributo debe comenzar con VUE_APP_, como VUE_APP_XXX

# 本地开发环境配置(.env.local)
NODE_ENV=development

# base url
VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx

// 測試服client-id
# VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
// 本地client-id
VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx

2. Encapsular el archivo base de solicitud

⭐ Creado en el directorio srcsrc/tools/http/request.js

// src/tools/http/request.js
import axios from 'axios'
import {
    
     Message} from 'element-ui' // 引入 Element 组件

export default function request ({
    
     type='COMMOn',data }){
    
    
    let baseUrl = process.env.VUE_APP_API_BASE_URL // 这是配置的 .env 文件
    switch (type) {
    
    
            case 'COMMON':
            baseUrl = process.env.VUE_APP_API_BASE_URL
            break;
            case 'LOGIN':
            baseUrl = process.env.VUE_APP_LOGIN_BASE_URL
            break;
            case 'FROM':
            baseUrl = process.env.VUE_APP_FORM_BASE_URL
      	    break;
        default:
            break;
    }
    console.log('baseUrl', process.env)
    const service = axios.create({
    
    
        baseURL: baseUrl,
        timeout: 5000
    })
    // 请求拦截器
    service.interceptors.request.use(config => {
    
    
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
    
    
            'Content-Type':'application/x-www-form-urlencoded' //配置请求头
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        if(token){
    
    
            config.params = {
    
    'token':token} //如果要求携带在参数中
            config.headers.token= token; //如果要求携带在请求头中
        }
        return config
    }, error => {
    
    
        Promise.reject(error)
    })
    
    // 响应拦截器
    service.interceptors.response.use(response => {
    
    
        return response
    }, error => {
    
    
        Message.error(error.message)
        return Promise.resolve(error.response)
    }
    return service(data)
}

4. Solicitar datos

1. Crea `api`una carpeta

⭐ srcCree apiuna carpeta en el directorio y coloque el método de cada módulo de solicitud. Todas las solicitudes futuras se escribirán en esta carpeta. Por ejemplo, nuestro sistema tiene un módulo de configuración de roles.

crearsrc/api/role-config.js

// src/api/role-config.js
import request from '@/tools/http/request'

// 获取角色列表的 api
export function getRoleListsApi (data) {
      
        // 接口需要的 data 数据
    return request ({
      
      
        data:{
      
      
            url:'/roleList',
            method:'post',
            data
        }
    })
}

3. Introducir la API de solicitud

Role.vueEl componente solicita datos

<script>
    import { getRoleListsApi } from '@/api/role-config.js'
    export default {
        name: 'Role',
        data (){
            return {
                roleList: [] // 存储需要渲染的数据
            }
        },
        methods:{
            // 获取角色列表
            async getRoleList () {
                const obj = { roleid:'普通会员' }
                const { roleList, code } = await getRoleListsApi(obj)
                if(code === 200){
                    this.roleList = roleList
                }
            }
        }
    }
</script>

5. Inicie el proyecto

⭐ Inicie el proyecto en el entorno de desarrollo.

1. Configurar paquete.json


  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "local": "vue-cli-service build --mode local", // 新加的
  },

2. Abra la línea de comando

  yarn local # 运行项目

Resumir

He estado postergando las cosas durante tres días y hoy finalmente lo solucioné. Admito que soy un vago. He estado relativamente ocupado en el trabajo estos días. ¡Quizás sea mejor volver durante el Día Nacional! Hoy en día, a través de axiosla simple encapsulación de solicitudes, tengo una nueva comprensión de la modularidad. Lo que más quiero decir es que a veces es realmente feliz poner el esfuerzo para lograr algo, ya sea grande o pequeño. Pero el proceso de finalización Es realmente una alegría desde el fondo de mi corazón. Algunas personas dicen que deben hacer grandes cosas para definir el éxito de una persona, pero ¿no son las pequeñas cosas que hacemos cada vez la piedra angular de nuestro éxito?