Empaquetado secundario de axios y resolución de problemas entre dominios

1. ¿Por qué axios se empaqueta dos veces?

Necesitamos usar el interceptor de solicitudes y el interceptor de respuestas cuando solicitamos datos;
interceptor de solicitudes: puede procesar algunos negocios antes de enviar la solicitud
Interceptor de respuestas: cuando se devuelven los datos del servidor, puede procesar algunas cosas

`cnpm install --save axios`Instale axios usando

inserte la descripción de la imagen aquí
Por lo general, el proyecto tiene una carpeta api (la carpeta para el empaque secundario de axios)
1. Cree una carpeta api
2. Cree request.js debajo de la carpeta api (usada para escribir el código para el empaque secundario de axios)

3. Escriba el código de embalaje secundario axios en request.js

// 对于axios进行二次封装
import axios from 'axios'

// 1.利用axios对象的方法create,去创建一个axiox实例
// 2.request就是axios,只不过稍微配置一下

const requests = axios.request({
    
    
  // 配置对象
  // 基础路径，发送请求的时候,路径当中会出现api
  baseURL: '/api',
  // 代表请求超时的时间5s
  timeout: 5000
})

// 请求拦截器：在发送请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    
    
  // config:配置对象,对象里面有一个属性很重要,headers请求头
  return config
})

// 响应拦截器:当服务器返回数据以后,可以处理一些事情
requests.interceptors.response.use((res)=>{
    
    
  // 成功的回调函数：服务器响应数据回来以后,响应拦截器可以检测到，可以做一些事情
  return res.data;
},(error)=>{
    
    
  // 响应失败的回调函数
  return Promise.reject(new Error('faile'))
})

// 对外暴露
export default requests

4. Gestión unificada de api (hay muchas interfaces solicitadas, que requieren una gestión unificada)

1. Cree un nuevo index.js en la carpeta api para la interfaz de administración
2. Escriba el código en index.js

// 当前模块作用：用于所有的API进行统一的管理
import requests from './request'

// 三级联动接口
// /api/product/getBaseCategoryList   get请求 无参数

export const reqCategoryList = () => {
    
    
  // 发请求:axios发送请求返回结果是Promise对象
  return requests({
    
     url: '/product/getBaseCategoryList', method: 'get' })
}

problemas entre dominios

Qué es dominio cruzado: las solicitudes con diferentes protocolos, nombres de dominio y números de puerto se denominan dominio cruzado
Ejemplo: http://localhost:8000/#/home: el servidor local del proyecto front-end
http://gmall -h5-api.atguigu.cn — el servidor backend que llama a los datos.
Si llama directamente a los datos del servidor backend, aparecerá 404

Hay tres formas de resolver problemas entre dominios: JSONP, CROS y configuración del servidor proxy.
Aquí usamos la configuración del servidor proxy para resolver el problema. Configure el siguiente código en vue.config.js

inserte la descripción de la imagen aquí