VUE中编写一个axios的配置文件,添加拦截器事件并且在其他vue文件中去调用请求
时间: 2024-02-12 12:04:45 浏览: 73
可以在Vue项目中编写一个axios的配置文件,来添加拦截器事件并且在其他Vue文件中调用请求。具体步骤如下:
1. 在src目录下新建一个文件夹,命名为`config`,在该文件夹下新建一个文件`axios.js`
2. 在`axios.js`文件中编写axios的配置信息,添加请求拦截器和响应拦截器:
```javascript
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // 接口的基础路径
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 对请求错误做些什么
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
console.log(error)
return Promise.reject(error)
}
)
export default service
```
3. 在需要使用axios的Vue文件中引入`axios.js`文件,调用配置好的axios请求:
```javascript
import axios from '@/config/axios.js'
export default {
mounted() {
axios.get('/api/users')
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
}
```
这样就可以在Vue项目中编写一个axios的配置文件,添加拦截器事件并且在其他Vue文件中调用请求。
阅读全文