0
点赞
收藏
分享

微信扫一扫

使用 BPF 监控 Kubernetes 集群(k8s BPF 工具 kubectl-trace认知

灯火南山 03-23 18:00 阅读 2

目录

前言

1、axios配置与测试

1.1、配置

1.2、测试

2、使用axios案例-渲染header

3、Pinia优化重复请求

3.1、为什么?

3.2、使用Pinia优化代码步骤

步骤一:在main.js中创建 Pinia 实例,并将其作为插件添加到 Vue 应用中

步骤二:在store文件夹下创建文件(例categoryStore.js),提取请求如下:

步骤三:调用 + 使用

4、导入依赖优化


前言

  • 根目录下创建aip文件夹 + utils文件夹
  • 安装axios:
    npm i axios
  • axios官网:起步 | Axios Docs 

  • 接口文档:接口文档 【都可以使用这个,好像是黑马老师写的,有点记不清了~】【使用自己写的后端项目就更好啦~】

1、axios配置与测试

1.1、配置

        在utils下创建http.js文件,根据官网: 基础配置通常包括:

  1. 实例化 - baseURL + timeout
  2. 拦截器 - 携带token 401拦截等

http.js内容:

import axios from 'axios'

// 1 - 创建axios实例
const http = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// 2 - axios请求拦截器
// 一般会进行token身份验证等
http.interceptors.request.use(config => {
  return config
}, e => Promise.reject(e))

// 3 - axios响应式拦截器
// 一般进行错误的统一提示,token失效的处理等
http.interceptors.response.use(  
  response => {  
    // 对响应数据做点什么  
    return response.data;  
  },  
  error => {  
    if (error.response) {  
      // 请求已发出,服务器也响应了状态码,但状态码不在 2xx 范围内  
      switch (error.response.status) {  
        case 401:  
          // 未授权,清除 token、跳转到登录页等  
          break;  
        case 404:  
          // 请求的资源不存在  
          break;  
        // 其他状态码...  
      }  
      return Promise.reject(error.response);  
    }  
      
    // 处理网络错误等  
    return Promise.reject(error.message || 'Error');  
  }  
);


export default http

上述代码说明:

  • 创建axios实例:创建时,我们可以修改默认值baseURL,这里我们就是修改为和上面接口一致的url,小伙伴在自己的项目中,需要修改为自己的url哦;timeout就是一个超时最长时间,也就是5s;
  • axios请求拦截器:请求拦截器在请求被发送到服务器之前执行。这里定义了一个拦截器,它接收一个 config 对象(这是请求的配置),然后直接返回它。如果请求出错(例如,由于网络问题),它会返回一个被拒绝的 Promise。在实际应用中,你可能会在这里进行一些预处理操作,例如添加身份验证 token 到请求的 headers 中;
  • axios响应式拦截器:响应拦截器在服务器响应返回后,但在 then 或 catch 被调用之前执行。这里定义的拦截器会提取响应的 data 属性【为什么要这样,因为一般项目中,知道返回正确后,其实我们都是】,并返回它。如果响应出错(例如,由于服务器错误或网络问题),它会返回一个被拒绝的 Promise。在实际应用中,你可能会在这里进行一些后处理操作,例如处理错误消息或 token 失效的情况;
  • 导出实例:http 实例被导出,以便在其他模块中使用;

1.2、测试

步骤一:在api文件夹下创建testAPI.js文件:

import http from '@/utils/http'

export function getCategoryAPI () {
    return http.get('home/category/head')
}

上述的路径是我上面给的接口文档中的哈~

步骤二:在main.js文件中:

getCategoryAPI().then(res => {
    console.log(res);
});

打开页面,刷新可看:


2、使用axios案例-渲染header

实现步骤:

  1. 封装接口函数
  2. 调用接口函数
  3. v-for渲染模版

步骤一:在api文件夹下增加文件layout.js,内容如下:

import http from "@/utils/http";

export function getCategoryAPI(){
    return http.get('home/category/head');
}

步骤二:在需要的地方,进行调用。例如我这里是在header的组件中调用:

<script setup>
import {onMounted, ref} from "vue";
import {getCategoryAPI} from "@/apis/layout";

const categoryList = ref([]);
const getCategory = async ()=>{
  let res = await getCategoryAPI();
  console.log(res.result);
  categoryList.value = res.result;
}
onMounted(()=>{
  getCategory();
})
</script>

步骤三:v-for渲染模版 , 例:

<li v-for="item in categoryList" :key="item.id">
    <RouterLink to="/">{{item.name}}</RouterLink>
</li>

效果,检查是否正确,我们在上面有打印data中的数据,我们来看看:

上面的首页在代码写死的哈,不是后端传的:


3、Pinia优化重复请求

3.1、为什么?

为什么需要优化请求?举例说明:

例如上述我们说的,以及上一篇文章中提到的,一个是header的部分,一个是吸顶部分,例如下图:

这是两个组件,但是中间的标签是一样的,也就是说,我们要写两次请求,请求怎么写这篇文章的目录2已经说了,如下代码需要写两次:

这不就代码冗余了,因此需要进行优化重复请求~

3.2、使用Pinia优化代码步骤

安装pinia:npm install pinia

步骤一:在main.js中创建 Pinia 实例,并将其作为插件添加到 Vue 应用中

如下:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import '@/styles/var.scss'; 
import '@/styles/icon.css';
import '@/styles/element/index.scss'; 
import { getCategoryAPI } from '@/api/testAPI'
import { createPinia } from 'pinia';
// 创建 Pinia 实例  
const pinia = createPinia(); 
const app = createApp(App).use(store).use(router);
getCategoryAPI().then(res => {
    console.log(res);
});
app.use(pinia); 
app.mount('#app');

步骤二:在store文件夹下创建文件(例categoryStore.js),提取请求如下:

import { ref , onMounted } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/api/layout'
                                            //这只是一个名字category
export const useCategoryStore = defineStore('category', () => {
  // 导航列表的数据管理
  // state 导航列表数据
  const categoryList = ref([])

  // action 获取导航数据的方法
  const getCategory = async () => {
    const res = await getCategoryAPI()
    categoryList.value = res.result
  }
  onMounted(()=>getCategory());

  return {
    categoryList,
    getCategory
  }
})

步骤三:调用 + 使用

调用时,代码如下:

import {useCategoryStore} from "@/store/categoryStore";
const categoryStore = useCategoryStore();


4、导入依赖优化

        这个大家可以先按照本系列的文章4:前端项目,个人笔记(四)【Vue-cli 迁移 Vite 】,先更换为vite项目,再操作,因为这个优化我在vue-cli项目中,没有搞成功~

在vite.config.js文件操作:

以上就可以自动导入了,例如我们引入子组件:

文章中其他地方都是一样的,只要在vite.config.js中配置了,都会自动导入~

举报

相关推荐

0 条评论