vue项目中axios请求网络接口封装的示例代码

在Vue项目中，使用axios进行网络接口的封装是提高代码复用性和可维护性的重要步骤。下面我们将详细探讨如何在Vue项目中实现axios的封装，以及封装get和post方法的具体步骤。 我们需要创建一个新的JavaScript文件，比如命名为`api.js`。在这个文件中，我们将引入axios库以及Mint-UI库的MessageBox和Toast组件，这两个组件主要用于提示信息和错误处理。axios的默认配置可以设置超时时间和请求头，例如： ```javascript import axios from 'axios' import { MessageBox, Toast } from 'mint-ui' axios.defaults.timeout = 50000 // 默认请求超时时间 axios.defaults.headers = '请求头' ``` 接着，我们封装get方法。封装get方法的目的是将请求参数和处理逻辑统一，方便在各个组件中调用。以下是一个简单的get方法封装示例： ```javascript export function getHttp(url, params = {}) { // 显示加载动画 mintUI.Indicator.open({ text: '加载中...', spinnerType: 'fading-circle' }) return new Promise((resolve, reject) => { axios.get(url, { params: params }) .then(response => { resolve(response.data) mintUI.Indicator.close() // 关闭动画 }) .catch(err => { reject(err) mintUI.Indicator.close() // 关闭动画 MessageBox.alert('message', err) // 显示错误信息 }) }) } ``` 对于post方法的封装，除了处理参数和响应外，我们还需要考虑可能出现的错误情况。以下是一个post方法的封装示例： ```javascript export function postHttp(url, data = {}) { mintUI.Indicator.open({ text: '加载中...', spinnerType: 'fading-circle' }) return new Promise((resolve, reject) => { axios.post(url, data) .then(response => { if (response.data.status === 1) { resolve(response.data) } else { Toast(response.data.msg) // 显示错误消息 } mintUI.Indicator.close() // 关闭动画 }, (err) => { reject(err) mintUI.Indicator.close() // 关闭动画 }) }) } ``` 封装完成后，为了在Vue项目全局范围内使用这些方法，我们需要在`main.js`文件中引入并挂载到Vue的原型链上： ```javascript import { getHttp, postHttp } from './config/api' Vue.prototype.$getHttp = getHttp Vue.prototype.$postHttp = postHttp ``` 这样，我们就可以在Vue组件中便捷地调用这些封装好的方法了，例如： ```javascript this.$getHttp(this.$shopUrl + 'api/product/list') .then((response) => { console.log(response.result) // 请求返回数据 }) this.$postHttp(this.$shopUrl + 'api/product/list', { ...params }) .then((response) => { console.log(response.result) // 请求返回数据 }) ``` 以上就是Vue项目中axios网络接口封装的基本过程。通过这样的封装，我们可以避免在每个组件中重复编写相同的请求逻辑，同时也能更好地管理错误处理和加载状态。在实际开发中，还可以根据需求添加更多的功能，比如设置自定义请求头、拦截器、错误重试等。