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 => { // 可以在此处添加 token return config }, error => { console.log(error) Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { const res = response.data if (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 封装示例，可以根据实际需求适当调整拦截器的逻辑。
