首页vue axios 封装请求

vue axios 封装请求

时间: 2023-07-06 21:08:54 浏览: 170

Vue中使用Axios发送HTTP请求的常用方式是将Axios封装成Vue插件。以下是一个简单的Vue Axios封装请求示例： 1. 首先，安装Axios依赖 ``` npm install axios --save ``` 2. 创建一个名为`http.js`的文件，在其中封装Axios并导出 ```js import axios from 'axios' const http = axios.create({ baseURL: 'http://localhost:3000/' // 设置请求地址的公共部分 }) // 请求拦截器 http.interceptors.request.use(config => { // 可以在请求发送前添加token等信息 return config }, error => { return Promise.reject(error) }) // 响应拦截器 http.interceptors.response.use(response => { // 可以对响应结果进行统一处理 return response.data }, error => { return Promise.reject(error) }) export default http ``` 3. 将Axios封装成Vue插件，在`main.js`中引入并使用 ```js import Vue from 'vue' import http from './http' Vue.prototype.$http = http ``` 4. 在组件中使用 ```js export default { methods: { fetchData() { this.$http.get('/api/data').then(res => { console.log(res) }).catch(error => { console.log(error) }) } } } ``` 以上就是一个简单的Vue Axios封装请求的示例。通过封装可以使HTTP请求的配置、拦截器等逻辑集中处理，方便进行统一管理和维护。

阅读全文