2024年最全vue项目全局axios请求和拦截器配置_vue的全局前置拦截器(2)，头条web前端面试节奏怎么样

最新推荐文章于 2025-04-20 22:52:36 发布

2401_84437691

最新推荐文章于 2025-04-20 22:52:36 发布

阅读量490

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.youkuaiyun.com/2401_84437691/article/details/138849890

版权

程序员专栏收录该内容

160 篇文章

订阅专栏

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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

\*/

//第二种写法,在原型上添加axios属性,相当于全局配置了axios,全局都能直接使用


**把axios挂载到 vue原型上 有个缺点------无法实现API接口的复用**  
 **当想要在多个组件发送同样的请求时,每个组件都要写同样的按钮和方法(都要重新调用一下API接口) ,不利于复用**


## 实现axios方法的复用


#### 第一步:封装公共接口


**在scr目录下创建一个utils文件夹,里面创建一个request.js模块,添加如下代码**

//导入axios
import axios from ‘axios’

const request = axios.create({
//指定请求的根路径
baseURL:‘http://127.0.0.1’
})
export default request

//使用方法,在需要使用的模块导入当前的公共接口模块
//通过request.get()/request.post(),发请求,url路径直接写各个接口名即可,无需写全名了



> 
> 拓展(后面下面的第二步才是封装接口的步骤):  
>  axios.create()是添加了自定义配置的新的axios
> 
> 
> 
> ```
> 例如：
> 用axios发送请求：
> axios({
>  method:'POST',
>  url:'http://localhost:8000/login',
>   data
>   })
>   用axios.create()创建一个新的axios发请求：
>   cosnt requset = axios.create({
>   //基础路径
>   baseURL:'http://localhost:8000/'
>   })
>   requset({
>   method:'POST',
>   url:'/login',
>   data
>   })
> 
> ```
> 
> 好处：、  
>  1.可以简化路径写法  
>  2.当基础路径发生变化时方便修改，有利于维护
> 
> 
> 


#### 第二步,封装公共的模块步骤


**在src目录下创建API文件夹,然后存放不同的api模块,例如文章模块的api的请求,这里封装acticleAPI.js模块**  
 内容如下

//在实际开发有各种各样的,例如评论相关的增删改查,用户信息的,文章相关的等等模块
//这里演示文章相关api的封装,其他根据需求也可以如此封装
//文章相关api都在此模块

//1.导出方法(方法名要见名知意)(向外按需导出)
//下面的request为公共接口的模块向外导出的,因此需要导入request.js公共模块,不然用不了
import request from ‘@/公共模块路径’
export const getArticleListAPI = function(参数值一,参数值二){
return request.get(‘/articles’,{
//请求参数
params:{
参数名一:参数值一,
参数名二:参数值二
}
})
}


#### 第三步调用封装好的方法发请求

在需要使用的模块,导入上面的公共接口和需要用的模块,代码如下




### 结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![前端学习书籍导图-1](https://img-blog.csdnimg.cn/img_convert/1d239f4196b162419e21e86baf2d4709.webp?x-oss-process=image/format,png)

推荐呀。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-gEsZBfnx-1715661739095)]