vue3 +ts 安装并封装axios_vue3 ts axios封装

error => {
    // 对请求错误做些什么
    Promise.reject(error)
}

)

// response 拦截器
request.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default request

## 4、使用步骤



> 
> **注意：**​​因为get请求的参数需要`params`，它是即将与请求一起发送的 URL 参数，为了简写采用了ES6的解构，就是把下面的 params 解构，**只有get 请求需要加多一层`params`**。
> 
> 
> 



> 
>  其它请求，如 post 等请求等就不用解构，形参是什么都行。
> 
> 
> 


####  步骤1:请求数据 ( 举例下面几个常用的 )


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

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

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

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

// get请求，没参数，
export const FlashSessionListApi = (): Res =>
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在顶层可以直接使用)

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

使用方式三：使用.then

## 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 =>
//第二个是参数，和上面一样那样写，没有就写null
request.post(‘UploadFile/xxxx’, params, {
onUploadProgress,//上传方法
});

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

#### 总结一下



面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。



万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**



![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**JavaScript**



![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)



**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**



![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)



**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。