vue3+ts完成axios封装

// 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’,

method: ‘post’,

data: parameter

})

}

export function getUserList(parameter?: any) {

return Request.axiosInstance({

url: ‘/users’,

method: ‘get’,

data: parameter

})

}

export function home(parameter?: any) {

return Request.axiosInstance({

url: ‘/home’,

method: ‘post’,

data: parameter

})

}

3. vue组件中使用

<el-form :model=“loginForm” @submit=“handleSubmit”>

# 判断

回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

[外链图片转存中…(img-sV33UvuL-1718721490153)]

[外链图片转存中…(img-wx1fdWyc-1718721490154)]