前端项目，个人笔记（三）【Vue-cli - api封装-axios使用举例】

目录

前言

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中配置了，都会自动导入~