Vue —— axios、插槽

配置代理

• 1、项目下载 axios 并引入 npm i axios

• 2、配置文件 vue.config.js 中配置代理：

  module.exports = defineConfig({
  ...
  devServer: {
      
    proxy: {
      '/proxy01': {   //代理前缀
        target: 'http://localhost:5000',  //代理目标服务器
        pathRewrite:{'^/proxy01':''},     //重写路径，把含 /proxy01 前缀替换为空字符
        ws: true,   // 用于支持webSocket                
        ChangeOrigin: true  //用于控制请求头中的host值
      },  
        
      //可以配置多个服务器代理
      '/proxy02': {   //代理前缀
        target: 'http://localhost:4000',  //代理目标服务器
        pathRewrite:{'^/proxy02':''},     //重写路径，把含 /proxy02 前缀替换为空字符
        ws: true,   // 用于支持webSocket               
        ChangeOrigin: true  //用于控制请求头中的host值
      }
    }
  }
  })
  

• 3、xxx.vue

...
import axios from 'axios' //引入axios	
...
getData01(){
    
            axios.get('http://localhost:8080/proxy01/data01').then(
              Response => {
                console.log('请求成功了',Response.data)
              },
              error => {
                console.log('请求失败了',error.message)
              }
            )
          },
              
          getData02(){
            axios.get('http://localhost:8080/proxy02/data02').then(
              Response => {
                console.log('请求成功了',Response.data)
              },
              error => {
                console.log('请求失败了',error.message)
              }
            )
          }

• 3、创建 api 文件夹 { index.js、request.js }

• request.js

//对 axios 进行二次封装
import axios from "axios";

//1.利用axios对象的create,去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests = axios.create({
    //配置对象
    //基础路径，发请求的时候，路径当中会出现api
    baseURL:"/api",
    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;

• index.js

// 此 index.js：    对 API 进行统一管理

//引入二次封装的axios ==> requests
import requests from "./request";

//三级联动接口

//1.已知请求后端的路径为  '/api/product/getBaseCategoryList'
export const reqCategoryList = () =>{
    //发请求：axios发请求返回结果 Promise 对象
    // 因为 api/request.js 中配置了 baseURL:"/api",所以下面不需要加 /api
    return requests({url:'/product/getBaseCategoryList',method:'get'});
}

// 可以简写为 export const reqCategoryList = () =>requests({url:'/product/getBaseCategoryList',method:'get'});

总结

插槽 slot

作用域插槽 ：数据不在插槽使用者上时，可以由定义插槽的组件传递过来