热手之二----技术栈的确定与配置

vue-router:路由管理工具 项目初始化时选中

pinia:状态管理工具 相比于vuex更加适配于vue3+ts

axios:请求管理工具

待定~~~

---------------------------------------------------------------------------------------------------------------------------------

一.axios的封装：

首先安装axios依赖:npm i axios

然后引入:import axios from "axios"

axios封装主要分四个模块:

1.基本全局配置

        主要包括:baseURL基本请求路径 timeout请求超时时间 header请求头 responseType响应类型 withCredentials是否在请求头附带cookie(根据实际情况于后端商量好)

        create一个axios对象来进行配置

2.Token,密钥

        axios对象.interceptors.request.use((config)=>{}成功回调,()=>{}失败回调) 请求拦截器

                在请求拦截器中传入的config代表请求体,可以在此判断请求的url是否在白名单中,如果不在就需要在请求头里加上token(白名单实际上就是一个数组可以创建一个配置中心引入来方便后期维护)

                在实际开发尤其c端项目中,可能还需要进行加密以确保安全性(md5加密)

3.响应拦截以及处理

        axios对象.interceptors.response.use(()=>{}成功回调,()=>{}失败回调) 响应拦截器

                在响应拦截器中主要判断请求状态码以及后续操作,比如跳转,请求失败弹出提示(可以使用组件库中的提示组件如elementUI中的message)等,有关请求状态码具体可百度.

4.封装请求方法

        创建一个api文件夹,存放请求文件,不同模块创建不同的请求文件

5.拓展功能

        防止暴力请求: 详见其他文章

        缓存数据:详见其他文章