最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求
自学几个月前端，为什么感觉什么都没学到？？
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。
最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。
很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。
这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。
但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。
所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。
2、安装
3、封装request
4、使用步骤
步骤1:请求数据 ( 举例下面几个常用的 )
步骤2:在要请求的组件上使用
5、代理
6、更多请求配置
1、为什么要封装axios
axios.get().then() 这样的书写,会有缺陷,在以下缺点
1、请求头能不能统一处理
解决： 创建一个 request/request.js 文件夹，
在里面可以使用axios.create创建实例对象
也可以在里面设置 请求 与 响应 拦截器2、不便于接口的统一管理
解决：在 request 文件夹加多一个api文件来管理所有接口，
(会先导入rerequest.js的实例)
并使用函数，不然每次发请求时都会跑一次api文件3、容易出现回调地狱
LogoutAPI () 最终的结果是返回proise对象
解决:acync + await
await 后面一般放promise对象
**注意：**但封装axios后还是可以用 .then()
2、安装
npm install axios
3、封装request
先在 src 下创建一个 request 文件夹，并添加一个 request.ts 文件
import axios from 'axios'
// 创建axios实例
const request = axios.create({
baseURL: '',// 所有的请求地址前缀部分
timeout: 80000, // 请求超时时间(毫秒)
withCredentials: true,// 异步请求携带cookie
// headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json',
// 'token': x-auth-token',//一开始就要token
// 'X-Requested-With': 'XMLHttpRequest',
// },
})
// request拦截器
request.interceptors.request.use(
config => {
// 如果你要去localStor获取token,(如果你有)
// let token = localStorage.getItem("x-auth-token");
// if (token) {
//添加请求头
//config.headers["Authorization"]="Bearer "+ token
// }
return config
},
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>;
// 一般情况下响应数据返回的这三个参数，
// 但不排除后端返回其它的可能性，
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