2024年Web前端最全vue3+ts完成axios封装，2024年最新大厂前端研发岗面试复盘

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

export class Request {

public static axiosInstance: AxiosInstance;

// constructor() {

// // 创建axios实例

// this.axiosInstance = axios.create({timeout: 1000 * 12});

// // 初始化拦截器

// this.initInterceptors();

// }

public static init() {

// 创建axios实例

this.axiosInstance = axios.create({

baseURL: ‘/api’,

timeout: 6000

});

// 初始化拦截器

this.initInterceptors();

return axios;

}

// 为了让http.ts中获取初始化好的axios实例

// public getInterceptors() {

// return this.axiosInstance;

// }

// 初始化拦截器

public static initInterceptors() {

// 设置post请求头

this.axiosInstance.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

/**

• 请求拦截器

• 每次请求前，如果存在token则在请求头中携带token

*/

this.axiosInstance.interceptors.request.use(

(config: AxiosRequestConfig) => {

// const token = Vue.ls.get(ACCESS_TOKEN)

// if (token) {

// config.headers[‘Authorization’] = 'Bearer ’ + token

// }

// 登录流程控制中，根据本地是否存在token判断用户的登录情况

// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token

// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码

// if (config.headers.isJwt) {

const token = localStorage.getItem(‘ACCESS_TOKEN’);

if (token) {

config.headers.Authorization = 'Bearer ’ + token;

}

// }

return config;

},

(error: any) => {

console.log(error);

},

);

// 响应拦截器

this.axiosInstance.interceptors.response.use(

// 请求成功

(response: AxiosResponse) => {

// if (res.headers.authorization) {

// localStorage.setItem(‘id_token’, res.headers.authorization);

// } else {

// if (res.data && res.data.token) {

// localStorage.setItem(‘id_token’, res.data.token);

// }

// }

if (response.status === 200) {

// return Promise.resolve(response.data);

return response;

} else {

Request.errorHandle(response);

// return Promise.reject(response.data);

return response;

}

},

// 请求失败

(error: any) => {

const {response} = error;

if (response) {

// 请求已发出，但是不在2xx的范围

Request.errorHandle(response);

return Promise.reject(response.data);

} else {

// 处理断网的情况

// eg:请求超时或断网时，更新state的network状态

// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

// 关于断网组件中的刷新重新获取数据，会在断网组件中说明

ElMessage({

message: ‘网络连接异常,请稍后再试!’,

type: ‘success’,

})

}

});

}

/**

• http握手错误

• @param res 响应回调,根据不同响应进行不同操作

*/

private static errorHandle(res: any) {

// 状态码判断

switch (res.status) {

case 401:

break;

case 403:

break;

case 404:

ElMessage({

message: ‘请求的资源不存在’,

type: ‘warning’,

})

break;

default:

ElMessage.error(‘连接错误’);

}

}

}

2.2 main.ts中引入axios和request

import { createApp } from ‘vue’

import App from ‘./App.vue’

import { Request } from ‘@/service/request’

import VueAxios from ‘vue-axios’

import ElementPlus from ‘element-plus’

import ‘element-plus/dist/index.css’

import router from ‘./router’

import store from ‘./store’

import { components } from ‘./plugins/element-plus’

const app = createApp(App)

for (const cpn of components) {

app.component(cpn.name, cpn)

}

app.use(store)

app.use(router)

app.use(ElementPlus)

app.use(VueAxios, Request.init())

app.mount(‘#app’)

2.3 编写接口 api.js

import { Request } from ‘./request’

export function login (parameter: any) {

return Request.axiosInstance({

url: ‘/cxLogin’,

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

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

我特地针对初学者整理一套前端学习资料

一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

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

我特地针对初学者整理一套前端学习资料

[外链图片转存中…(img-3J0H0KxC-1715379683259)]

[外链图片转存中…(img-TXaOEcYC-1715379683260)]