2024年前端最全vue项目全局axios请求和拦截器配置_vue的全局前置拦截器(1)，Flutter全方位深入探索

最后

资料过多，篇幅有限

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

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

//不在原型中添加axios属性的写法(不推荐,建议看下面这个)
/*

*/

//第二种写法,在原型上添加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:{
参数名一:参数值一,
参数名二:参数值二
}
})
}

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

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