Web前端最全vue3 +ts 安装并封装axios_vue3 ts axios封装，2024年最新阿里前端二面是什么

2401_84618831

于 2024-05-16 21:10:57 发布

阅读量895

点赞数 19

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84618831/article/details/138975227

版权

程序员专栏收录该内容

104 篇文章 0 订阅

订阅专栏

TCP协议

TCP 和 UDP 的区别？
TCP 三次握手的过程？
为什么是三次而不是两次、四次？
三次握手过程中可以携带数据么？
说说 TCP 四次挥手的过程
为什么是四次挥手而不是三次？
半连接队列和 SYN Flood 攻击的关系
如何应对 SYN Flood 攻击？
介绍一下 TCP 报文头部的字段
TCP 快速打开的原理(TFO)
说说TCP报文中时间戳的作用？
TCP 的超时重传时间是如何计算的？
TCP 的流量控制
TCP 的拥塞控制
说说 Nagle 算法和延迟确认？
如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

浏览器缓存?
说一说浏览器的本地存储？各自优劣如何？
说一说从输入URL到页面呈现发生了什么？
谈谈你对重绘和回流的理解
XSS攻击
CSRF攻击
HTTPS为什么让数据传输更安全？
实现事件的防抖和节流？
实现图片懒加载？

在 request 文件夹，再添加一个 api.ts 文件

定义接口格式：

export const 自定义接口名 = (形参:请求类型)：返回类型 => instance.方法(路径，后端要的参数);

import instance from "./request";

//一般情况下，接口类型会放到一个文件
// 下面两个TS接口，表示要传的参数
interface ReqLogin {
    name: string
    paw: string
}
interface ReqStatus {
    id: string
    navStatus: string
}


// Res是返回的参数，T是泛型，需要自己定义，返回对数统一管理***
type Res<T> = Promise<ItypeAPI<T>>;
// 一般情况下响应数据返回的这三个参数，
// 但不排除后端返回其它的可能性，
interface ItypeAPI<T> {
    data: T,//请求的数据，用泛型
    msg: string | null // 返回状态码的信息，如请求成功等
    code: number //返回后端自定义的200，404，500这种状态码
}


// post请求 ，没参数
export const LogoutAPI = (): Res<null> => 
    instance.post("/admin/logout");

// post请求，有参数,如传用户名和密码
export const loginAPI = (data: ReqLogin): Res<string> =>
    instance.post("/admin/login", data);

// post请求 ，没参数，但要路径传参
export const StatusAPI = (data: ReqStatus): Res<null> =>
    instance.post(`/productCategory?ids=${data.id}&navStatus=${data.navStatus}`);


//  get请求，没参数，
export const FlashSessionListApi = (): Res<null> =>
    instance.get("/flashSession/list");

// get请求，有参数，路径也要传参  (也可能直接在这写类型，不过不建议,大点的项目会维护一麻烦)
export const ProductCategoryApi = (params: { parentId: number }): any =>
    instance.get(`/productCategory/list/${params.parentId}`, { params });

// get请求，有参数，(如果你不会写类型也可以使用any,不过不建议,因为用了之后 和没写TS一样)
export const AdminListAPI = (params:any): any => 
    instance.get("/admin/list", { params });

步骤2:在要请求的组件上使用

使用方式一：直接使用(和vue2在cretae上用一样，setup自带async，await在顶层可以直接使用)

<script setup lang="ts">
import { indexAPI} from "../../request/api";
    //直接使用，一般用在进入页面入请求数据的接口
    let res = await indexAPI()
    console.log( "***" ,res);

</script>

使用方式二：使用 async / await，（setup虽然自带async，但单独用await只能在顶层使用，如果在函数下还是要async / await一起写）

<script setup lang="ts">
import { returnApplyListAPi } from "../../request/api";

const search = async(val: IUseTableParam) => {
    let res = await returnApplyListAPi({
        ...val,
    })
    console.log( "***" ,res);
    let { list, pageNum, pageSize, total } = res.data
    console.log(list, pageNum, pageSize, total);
}
</script>

使用方式三：使用.then

<script setup lang="ts">
import { returnApplyListAPi} from "../../request/api";

const logout = () => {
    returnApplyListAPi({
        ...val,
    }).then((res) => {
         console.log('***',res );
        let { list, pageNum, pageSize, total } = res.data
    })

};
</script>

5、代理

需要代理才写

上面的request 文件中

const request = axios.create({
    //这时你要代理
    //填写后端统一的前缀，
    //如：123.xx.xx.xx:456/api/...
    //这个/api是每一个接口都有的，就写它
    //如果没有，也写，下面会讲区别
    baseURL: '/api',
})

vite.config.ts 文件

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        //...
    ],
    server: {
        proxy: {
            '/api': { // 匹配请求路径，
                target: '你要代理的地址', // 代理的目标地址
                 // 开发模式，默认的127.0.0.1,开启后代理服务会把origin修改为目标地址
                changeOrigin: true,
                // secure: true, // 是否https接口
                // ws: true, // 是否代理websockets

                // 路径重写，**** 如果你的后端有统一前缀(如:/api)，就不开启；没有就开启
                //简单来说，就是是否改路径 加某些东西
                rewrite: (path) => path.replace(/^\/api/, '') 
            }
        }
    }
})

6、更多请求配置

今天做了一个上传请求进度条的需求，顺便做下记录

在上面的封装基础上，在上传时我们有时要做一个进度百分比的功能,

这是因为不想单独把这个接口写到某个页面，封装到一起不好吗？找也好找改也好改

export const uploadDocument = (
    params: { name: string, documentBase64: string },
    onUploadProgress: (progressEvent:AxiosProgressEvent) => void 
): Res<any> =>
    //第二个是参数，和上面一样那样写，没有就写null
    request.post('UploadFile/xxxx', params, {
        onUploadProgress,//上传方法
    });

onUploadProgress是asiox自己定制好的了，不要乱写
具体可以写什么，你可以按ctrl+左键点击post，然后再点击AxiosRequestConfig就知道能写什么了（使用的是vscode,其它的软件可能不太一样）

<el-upload
    :auto-upload="false"
    multiple
    :show-file-list="false"
    :limit="5"
    :on-change="onChange">
    <el-button type="primary">批量上传</el-button>
</el-upload>

// 每个上传文件时
const onChange = async (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    // 转成base64
    let base64: string = await new Promise((resolve, reject) => {
        // 创建一个新的 FileReader 对象
        let reader = new FileReader();
        // 读取 File 对象
        let raw = uploadFile.raw as File;
        reader.readAsDataURL(raw);
        // 加载完成后
        reader.onload = function () {
            // 将读取的数据转换为 base64 编码的字符串
            const base64String = (reader.result! as string).split(',')[1];
            // 解析为 Promise 对象，并返回 base64 编码的字符串
            resolve(base64String);
        };

        // 加载失败时
        reader.onerror = function () {
            ElMessage.error('加载文件失败');
            reject(new Error('Failed to load file'));
        };
    });
    // 发起上传请求
    let res = await uploadDocument(


**TCP协议**

- TCP 和 UDP 的区别？
- TCP 三次握手的过程？
- 为什么是三次而不是两次、四次？
- 三次握手过程中可以携带数据么？
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次？
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击？
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？

![](https://img-blog.csdnimg.cn/img_convert/972f39d5457afe3d1ff7aa4607d49f13.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

![](https://img-blog.csdnimg.cn/img_convert/b9d59450deec564b7a514eeae7f204a2.webp?x-oss-process=image/format,png)



g-wH26MOXg-1715865034272)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

[外链图片转存中...(img-P5qHPGZo-1715865034273)]

2401_84618831

关注

19
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Web前端最全vue3 +ts 安装并封装axios_vue3 ts axios封装，2024年最新阿里前端二面是什么

使用方式二：使用 async / await，（setup虽然自带async，但单独用await只能在顶层使用，如果在函数下还是要async / await一起写）具体可以写什么，你可以按ctrl+左键点击post，然后再点击AxiosRequestConfig就知道能写什么了（使用的是vscode,其它的软件可能不太一样）使用方式一：直接使用(和vue2在cretae上用一样，setup自带async，await在顶层可以直接使用)在上面的封装基础上，在上传时我们有时要做一个进度百分比的功能,
复制链接

扫一扫