5.10 axios二次封装
目的:
1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
在项目中安装axios
pnpm i axios
在src文件下新建utils/request.ts
文件配置如下
// 进行axios的二次封装
import axios from "axios";
import { ElMessage } from "element-plus";
// 第一步：利用axios对象的create方法，去创建axios实例(其他的配置:基础路径，超时的时间)
let request=axios.create({
// 基础路径
baseURL:import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
timeout:5000//超时的时间的设置
});
// 第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config)=>{
// config配置对象，headers属性请求头，经常给服务器端携带公共参数
// 返回配置对象
return config
})
// 第三步：响应拦截器
request.interceptors.response.use((response)=>{
// 成功回调
// 简化数据
return response.data
},(error)=>{
// 失败回调：处理http网络问题
// 定义一个变量：存储网络错误信息
let message=''
// http状态码
let status=error.response.status
switch(status){
case 401:
message='TOKEN过期'
break;
case 403:
message ='无权访问'
break;
case 404:
message ='请求地址错误'
break;
case 500:
message ='服务器出现问题'
break;
default:
message='网络出现问题'
break
}
// 提示错误信息
ElMessage({
type:'error',
message
})
return Promise.reject(error)
})
// 对外暴露
export default request
测试一下封装的axios是否好用
路径在mock下的user静态路径
测试代码
import request from './utils/request';
import { onMounted } from 'vue';
// 当组件挂载完毕测试发一个请求
onMounted(()=>{
request({
url:'/user/login',
method:'post',
data:{
username:'admin',
password:'111111'
}
}).then(res=>{
console.log(res);
}).catch
})
如果成功访问，console会显示成功代码200，
如果失败则应该是路径问题
只需把多余的路径删除即可
使用请求拦截器，可以携带参数过去
5.11 API接口统一管理
一般需要在项目文件夹下新建API文件夹
src/api,有多少个页面使用到api就有多少个子文件夹
比如获取user接口数据需要进行如下操作
mock/user.ts 下的获取方式
const { username, password } = body; return { code: 200, data: { token } }
都是对象，因此type.ts类型需要写成
// 登录接口需要携带参数ts类型
export interface loginForm{
username:String,
password:string
}
interface dataType{
token:string
}
// 登录接口返回数据类型
export interface loginResponseData{
code:number,
data:dataType
}
interface userInfo{
userId:number,
avatar:string,
username:string,
password:string,
desc:string,
roles:string[],
buttons:string[],
routes:string[],
token:string
}
interface user{
checkUser:userInfo
}
// 定义服务器返回用户信息相关的数据类型
export interface userResponseData{
code:number,
data:user
}
封装如下
部署完成之后需要进行测试
import { onMounted } from 'vue';
import {reqLogin} from './api/user'
onMounted(()=>{
reqLogin({username:'admin',password:'111111'})
})
5.11 模板路由配置
安装pnpm i vue-router
src下新建文件夹router
配置如下
index.ts
// 通过vue-router插件实现模板的配置
import {createRouter,createWebHashHistory}from 'vue-router'
import { constantRoute } from './routers'
// 创建路由器
let router =createRouter({
// 路由模式hash
history: createWebHashHistory(),
routes:constantRoute,
// 滚动行为
scrollBehavior(){
return{
left:0,
top:0
}
}
})
export default router
router.ts
// 对外暴露配置路由(常量路由)
export const constantRoute=[
{
// 登录
path:'/login',
component:()=>import('@/views/login/index.vue'),
name:'login',//命名路由
},
{
// 登录成功后展示数据的路由
path:'/',
component:()=>import('@/views/home/index.vue'),
name:'layout'
},
{
// 404
path:'/404',
component:()=>import('@/views/404/index.vue'),
name:'404'
},
{
path:'/:pathMatch(.*)*',
redirect:'/404',//重定向redirect
name:'Any'
}
]
配置完毕之后需要在main.ts中引入路由，并注册
// 引入路由
import router from './router'
// 注册模板路由
app.use(router)
成功之后重启项目测试是否完成路由配置
默认路径 /
登录路径 login
报错路由 404
未知路径 重定向404
