在vue3中,通过请求api接口获取新闻数据,实现一个简单的列表功能
文章目录使用步骤1、引入axios库2、封装axios请求3、创建api文件4、配置代理5、请求接口获取数据6、预览提示:以下是本篇文章正文内容,下面案例可供参考使用步骤1、引入axios库npm install axios2、封装axios请求在src目录下建立 utils文件夹,在utils文件夹里面新建request.jsimport Axios from 'axios'const axio
·
提示:以下是本篇文章正文内容,下面案例可供参考
使用步骤
1、引入axios库
npm install axios
2、封装axios请求
在src目录下建立 utils文件夹,在utils文件夹里面新建request.js
import Axios from 'axios'
const axios = Axios.create({
headers: {
'Content-Type': 'application/json'
},
timeout: 60000, // 超时
baseURL: 'http://localhost:8080' // 请求接口地址,这里使用本项目地址,因为我们是前后端分离,后面需要在vue.config.js里面配置代理,实际请求得地址不是这个。
})
// 请求拦截
axios.interceptors.request.use(req => {
if (req.method === 'get') {
const url = req.url
const t = new Date().getTime()
if (url.indexOf('?') >= 0) {
req.url = `${url}&t=${t}`
} else {
req.url = `${url}?t=${t}`
}
}
return req
})
// 响应拦截
axios.interceptors.response.use(
response => {
return response.data
},
error => {
// 响应失败统一处理
const { response } = error
if (response) {
switch (response.status) {
case 400:
window.$vm.$message.error('请求无效')
break
case 401:
window.$vm.$message.error({ message: '尚未登录请重新登录' })
break
case 403:
window.$vm.$message.error('您没有权限这样做,请联系管理员')
break
case 404:
window.$vm.$message.error('请求未找到')
break
case 500:
window.$vm.$message.error('系统异常')
break
case 504:
window.$vm.$message.error('请求超时,请稍后再试')
break
default:
window.$vm.$message.error('系统异常')
break
}
}
return Promise.reject(error)
}
)
export default axios
3、创建api文件
在src目录下创建api文件夹,存放请求接口信息,在api文件夹下创建一个article.js
import request from '@/utils/request' // 引入封装得axios
// 获取新闻列表
export function getArticleList (data) {
return request({
url: '/web/getArticleList',
method: 'POST',
data
})
}
4、配置代理
在项目根目录下创建vue.config.js文件,代码如下,target需要配置你实际请求的接口地址域名,这样就可以通过代理请求到后台接口数据
module.exports = {
devServer: {
proxy: {
'/web': {
target: 'http://api.xxxxxxx.cn',
changeOrigin: true
}
}
}
}
5、请求接口获取数据
我们打开vies/home.vue文件,在这个文件中获取新闻列表
模板文件代码,下面遍历list绑定数据
<template>
<div class="home">
<ul>
<li v-for="item in list" :key="item.id">
<a href="">{{item.title}}</a>
</li>
</ul>
</div>
</template>
script代码,这里我们使用reactive,toRefs函数
reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组
<script>
import { onMounted, reactive, toRefs } from 'vue'
import { getArticleList } from '../api/article'
export default {
name: 'Home',
setup () {
const state = reactive({
list: []
})
// 调取api获取数据
const getNewsList = () => {
const params = {
page: 1,
pageSize: 5
}
getArticleList(params).then(res => {
console.log(res)
const { data } = res
state.list = data.data
})
}
onMounted(getNewsList)
// ...toRefs()将state里面得对象解构
return {
...toRefs(state)
}
}
}
</script>
6、预览
更多推荐
所有评论(0)