写一个vue中的axios请求代码
时间: 2024-06-09 13:12:17 浏览: 6
好的,以下是一个基本的使用axios发送GET请求的Vue代码示例:
```
<template>
<div>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
posts: []
}
},
created() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.posts = response.data;
})
.catch(error => {
console.log(error);
});
}
}
</script>
```
在这个例子中,我们使用了axios库来发送一个GET请求,请求JSONPlaceholder网站上的所有文章。在`created`生命周期钩子中,我们使用`axios.get()`方法来发送请求,并且将获取到的数据存储在Vue实例的`posts`数据属性中。如果请求失败,我们会在控制台中打印错误信息。
相关问题
vue封装axios请求 代码举例说明
非常感谢您的提问!下面是一个基于Vue封装Axios请求的示例代码:
```javascript
import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前添加一些请求头参数
config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
return config
},
error => {
// 处理请求错误
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 处理响应数据
const res = response.data
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 处理响应错误
console.log(error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
// 封装请求方法
const request = {
get(url, params) {
return service({
method: 'get',
url,
params
})
},
post(url, data) {
return service({
method: 'post',
url,
data
})
},
put(url, data) {
return service({
method: 'put',
url,
data
})
},
delete(url) {
return service({
method: 'delete',
url
})
}
}
export default request
```
当然,对于不同的项目和需求,具体的封装方式也可能会有所不同。希望这段代码能够帮助您进一步理解Vue中如何封装Axios请求。
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等。