在vue3中，通过请求api接口获取新闻数据，实现一个简单的列表功能

---

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

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、预览