Vue - encapsulación secundaria de axios

---

1. Solicitar y pasar parámetros

En Vue, el envío de solicitudes es generalmente en el gancho creado , por supuesto, no hay problema para ponerlo en el gancho montado.

La premisa de las siguientes solicitudes es que axios esté instalado e importado import axios from 'axios'con éxito

Enlace del sitio web oficial de Axios

1. obtener solicitud

• obtener solicitudes para pasar parámetros, que se pasan en la dirección ?xxx=123en forma de

  // Vue 环境中
  async created() {
    
    
    let res = await axios.get(
      "http://testapi.xuexiluxian.cn/api/slider/getSliders?xxx=123"
    );
    console.log(res);
  }

2. publicar solicitud

• La solicitud posterior pasa parámetros, que se pasan en el segundo parámetro

  // Vue 环境中
  async created() {
    
    
    let res = await axios.post('http://testapi.xuexiluxian.cn/api/course/mostNew', {
    
    
      pageNum: 1,
      pageSize: 5
    })
    console.log(res);
  }

3. Configuración de solicitud de Axios

• Hay muchas propiedades que se pueden establecer en la configuración de la solicitud

  // Vue环境中
  async created() {
    
    
    let res = await axios({
    
    
      url: 'http://testapi.xuexiluxian.cn/api/course/mostNew',
      method: 'post', // 默认是 get 请求
      headers: {
    
    }, // 自定义请求头
      data: {
    
      // post 请求，前端给后端传递的参数
        pageNum: 1,
        pageSize: 5
      }, 
      params: {
    
    }, // get 请求，前端给后端传递的参数
      timeout: 0, // 请求超时
      responseType: 'json' // 返回的数据类型
    })
  console.log(res);
  }

En segundo lugar, el embalaje secundario de axios

Finalidad: facilitar la gestión unificada

Nota: Axios debe instalarse antes de poder usarse, escriba en el terminal: npm i axiosy luego presione Entrar para instalarlo.

1. Configurar el interceptor

Cree una nueva utilscarpeta un archivo en esta request.jscarpeta

archivo request.js

• Primero crea el objeto axios
• Agregue un interceptor de solicitudes (parámetros desde el front-end hasta el back-end)
• Agregue un interceptor de respuesta (datos del backend al frontend)

import axios from 'axios'

// 创建 axios 对象
const instance = axios.create({
    
    
    baseURL: 'http://testapi.xuexiluxian.cn/api', // 根路径
    timeout: 2000 // 网络延时
})

// 添加请求拦截器 => 前端给后端的参数【还没到后端响应】
instance.interceptors.request.use(function (config) {
    
    
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器 => 后端给前端的数据【后端返回给前端的东西】
instance.interceptors.response.use(function (response) {
    
    
    // 对响应数据做点什么
    return response;
}, function (error) {
    
    
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 最终返回的对象
export default instance

2. Enviar una solicitud

En el componente que necesita enviar una solicitud, impórtelo request.jsy luego envíe la solicitud

Componente App.vue

• en el componente que necesita ser utilizado导入 request
• Simplemente envíe la solicitud directamente

<template>
  <div id="app">前端杂货铺</div>
</template>

<script>
import request from "./utils/request";
export default {
    
    
  name: "App",
  data() {
    
    
    return {
    
    };
  },
  created() {
    
    
  	// get 请求
    request({
    
    
      url: "/course/category/getSecondCategorys",
    }).then((res) => {
    
    
      console.log(res);
    });

	// post 请求
    request({
    
    
      url: "/course/mostNew",
      method: "post",
      data: {
    
    
        pageNum: 1,
        pageSize: 5,
      },
    }).then((res) => {
    
    
      console.log(res);
    });
  }
}
</script>

3. Desacoplamiento de API

El propósito del desacoplamiento de API:

• Para la misma interfaz se puede utilizar varias veces
• Con el fin de facilitar la gestión unificada de las solicitudes de API

1. La solicitud correspondiente al archivo de configuración

Cree una nueva carpeta en el directorio src, cree apiun archivo en esta carpeta xxx.jsy configure la solicitud correspondiente

./api/curso.js archivo

• Enviar una solicitud relacionada con el curso

import request from "../utils/request";

// 获取一级分类（get请求）
export function getSendCategorys() {
    
    
    return request({
    
    
        url: '/course/category/getSecondCategorys',
    })
}

// 查询课程（post请求）
export function courseSearch(data) {
    
    
    return request({
    
    
        url: '/course/search',
        method: 'post',
        data
    })
}

2. Obtener los datos solicitados

Componente App.vue

• Importar la función correspondiente de la solicitud definida en el archivo
• recuperar datos

<template>
  <div id="app"></div>
</template>

<script>
import {
    
     getSendCategorys, courseSearch } from "./api/course";
export default {
    
    
  name: "App",
  data() {
    
    
    return {
    
    };
  },
  created() {
    
    
  	// 获取一级分类
    getSendCategorys().then((res) => {
    
    
      console.log(res);
    });
    // 查询课程（有参数的传递）
    courseSearch({
    
    
      pageNum: 1,
      pageSize: 5
    }).then((res) => {
    
    
      console.log(res);
    });
  }
}

La estructura del archivo es la siguiente:

4. Resumen

La encapsulación secundaria de axios debe configurarse en proyectos de nivel empresarial.

Debido a los axios encapsulados, es más fácil de usar y administrar , y puede reducir la cantidad de código y hacer que la lógica sea más clara.

Aquí está la tienda de comestibles frontal , esperando su atención Sanlian +