2024年Web前端最新【Vue】Request模块 - axios 封装&amp；Vuex的持久化存储(1)，面试经验分享app

Request模块 - axios 封装

使用axios来请求后端接口，一般会对axios进行一些配置（比如配置基础地址，请求响应拦截器）

所以项目开发中都会对axios进行基本的二次封装，封装到一个request模块中，便于维护使用

安装axios
新建request模块（util/request.js）
创建实例&配置导出实例

import axios from "axios";
import {Toast} from 'vant'
//创建axios实例，将来对创建出来的实例进行自定义的配置
//好处，不会污染原始的axios
const instance = axios.create({
  //基础地址
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  timeout: 1000,
 
});


//自定义配置 --配置请求响应拦截器


// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么(默认axios会多一层data包装，需要拦截器处理一下)
  const res=response.data;
  if(res.status!==200){
      //给提示 
      Toast(res.message)
      //抛出错误的promise
    throw Promise.reject(res.message)
  }

  return res




}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});






//导出配置好的实例
export default instance

测试使用

import request from '@/util/request'

和普通的axios使用一样 ，就是自定义的axios
requset.get('路径')

其他：

 const { data: { base64, key } } = await getPicCode()


### 最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![大厂面试题](https://img-blog.csdnimg.cn/img_convert/2ac2e950104ea4a8b560e506cff1aa96.webp?x-oss-process=image/format,png)

![面试题目录](https://img-blog.csdnimg.cn/img_convert/c9ac01c46efba6dc2a764f2a5d443d7f.webp?x-oss-process=image/format,png)

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

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





图片转存中...(img-wDjelXMD-1715445934721)]

[外链图片转存中...(img-vWXQdYOM-1715445934722)]

[外链图片转存中...(img-zMFACFf6-1715445934722)]

2024年Web前端最新【Vue】Request模块 - axios 封装&amp；Vuex的持久化存储(1)，面试经验分享app

更多面试题

Request模块 - axios 封装