vue3 vite 数据可视化大屏 项目开发中需要和后端进行数据交互，这需要后端开发人员提供接口文档，前端开发人员根据接口文档进行接口调用。

安装依赖

要请求接口数据我们需要插件，这里我们使用axios来请求接口
使用pnpm来安装依赖

pnpm i axios

使用axios

axios 在使用前首先要引用，引用完成后，就可以请求接口了。axios的请求方式有多种，常用的有get和post所以这里就介绍get和post

import axios from 'axios'

axios get请求

get请求参数为接口地址

axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

axios post请求

post请求除了请求参数外还有参数

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

全局封装

接口在进行请求的时候我们需要处理一些响应以及一些错误提示，以及请求协议头比如接口鉴权token携带以及错误提示，如果每一个接口请求都要单独写一遍的话，那会写很多不必要的代码，并且不利于维护，所以我们需要进行全局封装，对接口进行全局封装，
设置超时时间，
设置接口地址，
以及token,判断token是否存在，存在则携带token，
对接口错误返回进行拦截处理
对接口报错进行弹窗提示等；
接口报401的时候我们可以根据401跳转到登录页
我们封装成一个文件request.js

import axios from 'axios'
import {devIp} from '@/api/ipConfig'
import router from '../router'
// create an axios instance

const service = axios.create({
    baseURL: devIp + '', // 测试IP
    timeout: 100000, // request timeout
    // headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    // headers: {'Content-Type': 'application/json'},
    // transformRequest: function (obj) {
    //   var str = []
    //   for (var p in obj) {
    //     str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
    //   }
    //   return str.join('&')
    // }
})

// request interceptor
service.interceptors.request.use(config => {
    let token = localStorage.getItem('token')
    if (token) {
        config.headers['Authorization'] = token // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
}, error => {
    Promise.reject(error)
})

// respone interceptor
service.interceptors.response.use(
    // response => response,
    response => {
        console.log(response)
        const res = response.data
        return res;
        // if (res.status == 200) {
        //   return res
        // } else {
        //   Message({
        //     message: res.message,
        //     type: 'error',
        //     duration: 5 * 1000
        //   })
        //   return res
        // }
    },
    error => {
        console.log('err' + error)// for debug
        // Message({
        //   message: error.message,
        //   type: 'error',
        //   duration: 3000
        // })
        return Promise.reject(error)
    })

export default service

接口封装

完成全局封装后，完成了上面的request.js封装后，我们引入我们封装的文件，然后对接口进行封装，为什么对接口进行封装呢？前端接口调用完成以后，后端调整可能会调整导致接口地址变更，这时候我们就可以只修改封装位置修改接口地址，而不需要去所有调用此接口的位置进行修改，减少误操作。

import request from '../request'
// 部门数量
export function dockerconfig(data) {
    return request({
        url: '/api/blade-government/dockerconfig/page',
        method: 'get',
        data
    })
}
// 部门数量
export function getData(data) {
    return request({
        url: '/api/blade-government/dockerconfig/page',
        method: 'post',
        data
    })
}

接口请求

封装完接口后，我们就可以请求接口了

引入我们封装的接口

import {
  businessconfig,
} from "@/api/api/user.js";

调用我们封装的接口

// 部门数量
this.getData()

// 部门数量
getData() {
  var that = this;
  dockerconfig().then(res => {
    if (res.code == 200) {
      that.list[0].value = res.data.total
    } else {

    }
  }).catch(err => {
  })
},

到这里可视化数据大屏调用接口的教程就结束了。