vue3.2之边学边练（二）vue下axios封装

这一篇严格意义上说和vue没什么太大关系。

网页前端少不了请求数据，这也是为什么上一篇就加入了axios的需求添加。

原理就是通过axios发送相应的post，get网络请求请求数据，然后返回展现到页面上。

一、项目结构

在src目录下新建utils和api两个文件夹，utils用于存放的公共封装类库函数，api则是请求的方法

（utils 英文是工具类的意思）。utils文件夹下新建request.js文件，代码如下

request.js

import axios from 'axios'
//通过create方法创建请求。参数有baseURL和timeout

const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_API,
    timeout: 5000
});
//创建请求拦截器
//请求拦截器里可以加入需要的token等认证信息，现在还用不到，所以基本是空的
service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }

);
//创建相应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        return res;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

export default service;

这里有个import.meta.env.VITE_BASE_API,这个是在.env文件中定义的。vue在创建的过程中是没有.env这个文件的，需要自己手动加入。

VITE_BASE_API=http://localhost:8080/api/

 这个是定义的api基础地址。

关于vite的配置文件，vite官网Vite中文网 有详细的解释。

api文件夹下新建一个menu.js文件

menu.js

import request from '@/utils/request'

export function getMenu() {
    return request({
        url: 'menu/list',
        method: 'get'
    });
}

将刚刚封装的东东引入进来，然后去请求地址。这里只需要提供请求的url和请求方法就可以了。其实这里只是封装一个方法而已。这个方法返回的是一个Promise。这个api下面返回的数据如下。

这里返回的不是一个标准的带有状态的RESTful返回，只是一个json字符串，这里面还是有个坑的。

如果要调用的是完整的RESTful返回，那么引用的时候得加入data 属性的。

下一步就是业务页面使用了。

在Menu模板下调用

<script setup>
import { getMenu } from '@/api/menu'
import { ref, watchEffect } from 'Vue'
let menuList = ref();

watchEffect(async() => {   
    menuList.value =  await getMenu();    
});

</script>

<template>       
    <el-menu mode="horizontal">
        <el-menu-item v-for="menu in menuList" v-bind:key="menu.id" :index="menu.url">{{ menu.name }}</el-menu-item> 
    </el-menu>    
</template>

第一步引入封装的api

然后用vue的监听把数据返回来。这个ref引用得加value复制，否则数据时显示不出来的。

看看效果