vue3 axios封装请求
时间: 2023-05-21 16:01:30 浏览: 82
您好,以下是一个简单的 Vue3 Axios 封装请求的示例代码:
```javascript
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
export const get = (url, params) => {
return instance.get(url, { params })
}
export const post = (url, data) => {
return instance.post(url, data)
}
```
您可以使用 `get` 和 `post` 方法来发送 GET 和 POST 请求,例如:
```javascript
import { get, post } from './api'
get('/users', { page: 1 }).then(response => {
console.log(response.data)
})
post('/login', { username: 'admin', password: '123456' }).then(response => {
console.log(response.data)
})
```
希望对您有所帮助!
相关问题
vue3 axios封装请求代码
以下是一个简单的Vue3 Axios封装请求代码:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://example.com/api/',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
},
});
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 在发送请求之前可以做一些处理,如添加token等
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response) => {
// 对响应数据进行处理,如统一处理错误码等
return response.data;
},
(error) => {
return Promise.reject(error);
}
);
export default instance;
```
使用时,我们可以在Vue组件中直接引用:
```javascript
import axios from '@/utils/axios';
axios.get('/users')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```
此外,还可以根据具体项目需求封装其他的请求方法,如POST、PUT和DELETE等。
vue3.0 axios封装请求微服务后台
前置知识:
- Vue3.0
- Axios
- 微服务
Axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js。在Vue中,我们通常使用Axios来发送HTTP请求。
微服务是一种面向服务架构的软件设计风格。它把一个应用划分为一些小的、独立的、可替换的服务,每个服务运行在自己的进程中,服务之间通过轻量级通信机制互相协作。微服务架构可以提高应用的可伸缩性和可维护性。
下面是一个基于Vue3和Axios的微服务请求封装示例:
1. 安装Axios
```
npm install axios
```
2. 创建axios实例
```js
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 微服务请求的基础路径
timeout: 5000 // 超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做些什么
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做些什么
const res = response.data
if (res.code !== 20000) {
// 如果响应状态码不是20000,则视为错误
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 对响应错误做些什么
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
```
3. 封装请求方法
```js
import request from '@/utils/request'
export function getUserInfo() {
return request({
url: '/user/info',
method: 'get'
})
}
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
export function logout() {
return request({
url: '/user/logout',
method: 'post'
})
}
```
在组件中使用:
```js
import { getUserInfo } from '@/api/user'
export default {
name: 'HelloWorld',
created() {
getUserInfo().then(response => {
console.log(response)
})
}
}
```
这样就完成了基于Vue3和Axios的微服务请求封装。