当前位置：首页 > news >正文

vue axios封装

news 2025/7/14 21:57:22

Vue.js 是一款前端框架，而 Axios 是一个基于 Promise 的 HTTP 请求客户端，通常用于发送 Ajax 请求。在Vue.js开发中，经常需要使用 Axios 来进行 HTTP 数据请求，为了更好的维护和使用 Axios，我们可以对其进行封装。下面是一个简单的 Axios 封装示例：

新建一个 axios.js 文件

import axios from 'axios'// 创建一个 axios 实例
const service = axios.create({baseURL: process.env.BASE_API, // 请求的根路径timeout: 5000 // 请求超时时间
})// 请求拦截器
service.interceptors.request.use(config => {// 可以在此处添加 tokenreturn config},error => {console.log(error)Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {const res = response.dataif (res.code !== 200) {console.log(res.msg)return Promise.reject(res.msg || 'Error')} else {return res}},error => {console.log('err' + error)return Promise.reject(error)}
)export default service

在 main.js 中引入 axios.js 文件

import axios from './axios.js'Vue.prototype.$http = axios

在组件中使用封装好的 axios

export default {data() {return {list: []}},mounted() {this.getList()},methods: {getList() {this.$http.get('/api/list').then(res => {this.list = res.list}).catch(error => {console.log(error)})}}
}

以上就是一个简单的 Axios 封装示例，可以根据实际需求适当调整拦截器的逻辑。

查看全文

http://www.lryc.cn/news/191479.html