vue axios代码封装示例
时间: 2023-09-20 19:06:16 浏览: 177
封装一下vue中的axios示例代码详解
### 回答1:
Vue Axios 代码封装示例可以参考如下:// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})// request 拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做一些处理
// ...
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
// 如果返回的状态码不是200,则reject
if (res.code !== 200) {
return Promise.reject(res.message || 'Error')
} else {
return res
}
},
error => {
return Promise.reject(error)
}
)export default service
### 回答2:
Vue axios 提供了一种方便的方式来发送 HTTP 请求和处理响应。以下是一个简单的示例,展示了如何封装 axios 代码。
首先,需要在项目中安装 axios:
```
npm install axios
```
然后,在你的Vue组件中,你可以创建一个名为axiosService.js的文件,并将以下代码添加到该文件中:
```javascript
import axios from 'axios';
// 创建一个 axios 实例,可以在所有的请求中共享该实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置请求的基础URL
timeout: 5000 // 设置请求超时时间
});
// 请求拦截器,在发送请求前可以对请求进行一些处理
instance.interceptors.request.use(
config => {
// 在请求发送前做一些处理,例如添加 token 到请求头部
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
return config;
},
error => {
// 处理请求错误
console.error(error);
return Promise.reject(error);
}
);
// 响应拦截器,在接收到响应后可以对响应进行一些处理
instance.interceptors.response.use(
response => {
// 在接收到响应数据前做一些处理
return response.data;
},
error => {
// 处理响应错误
console.error(error);
return Promise.reject(error);
}
);
export default instance;
```
现在,在你的 Vue 组件中,你可以导入 `axiosService.js` 并使用 `axios` 实例来发送请求:
```javascript
import axiosService from '@/axiosService';
export default {
data() {
return {
users: []
};
},
methods: {
getUsers() {
axiosService.get('/users')
.then(response => {
this.users = response;
})
.catch(error => {
console.error(error);
});
}
},
mounted() {
this.getUsers();
}
};
```
这是一个简单的封装示例,当然你可以根据你项目的需求来进行更复杂的封装。这样可以提高代码的可重用性,并使代码更易于维护。
### 回答3:
以下是一个Vue Axios代码封装的示例:
首先,我们需要安装`axios`和`vue-axios`,可以通过npm或者yarn进行安装。
然后,我们创建一个util文件夹,并在其中创建一个`http.js`文件。在`http.js`中,我们导入`axios`和`vue-axios`,同时创建一个名为`http`的实例,并设置其基本的请求配置。
```javascript
import axios from 'axios';
import VueAxios from 'vue-axios';
import Vue from 'vue';
Vue.use(VueAxios, axios);
const http = axios.create({
baseURL: 'http://api.example.com', // 设置默认的请求地址
timeout: 5000, // 设置请求超时时间
headers: {
'Content-Type': 'application/json', // 设置请求头类型
},
});
export default http;
```
在`http.js`中,我们创建了一个名为`http`的实例,这样我们可以在整个项目中使用该实例来发送请求,并可以设置一些默认的请求配置。
接下来,我们可以在其他需要发送请求的组件中引入`http.js`文件,并使用`http`来发送请求。
```javascript
import http from '@/utils/http';
export default {
methods: {
fetchData() {
http.get('/data').then(response => {
// 处理响应数据
}).catch(error => {
// 处理错误
});
},
sendData() {
const data = {
// 请求的数据
};
http.post('/data', data).then(response => {
// 处理响应数据
}).catch(error => {
// 处理错误
});
},
},
};
```
在上述示例中,我们首先引入了`http.js`文件,然后通过使用`http`来发送请求。我们可以使用`http.get`来发送GET请求,使用`http.post`来发送POST请求,等等。在请求的结果中,我们可以使用`.then`来处理成功的响应,使用`.catch`来处理错误。
通过封装`http.js`文件,我们可以在整个项目中使用同样的请求配置,同时也可以更好地管理请求和错误处理的逻辑。
阅读全文