数据可视化大屏项目开发中，经常需要请求数据，今天讲接口请求数据的流程记录一下。

axios封装

我们创建一个文件request.js

import axios from 'axios'
// import {Message} from 'element-ui'
import {baseUrl} from '@/api/ipConfig'
// 刷新token的一个开关，防止重复请求
let isRefreshing = true;

const service = axios.create({
    baseURL: baseUrl + '', // 测试IP
    timeout: 100000, // request timeout
})

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

// respone interceptor
service.interceptors.response.use(
    // response => response,
    response => {
        const res = response.data
        return res;
    },
    error => {
        if (error.response.data.code == 401) {
            if (isRefreshing) {
                isRefreshing = false;
                return refreshToken().then((res) => {
                    const data = res.data;
                    if (data.access_token) {
                        localStorage.setItem('access_token', data.access_token)
                        // 已经刷新了token，将所有队列中的请求进行重试
                        window.location.reload();
                    } else {
                        return false;
                    }
                }).catch(() => {
                    return false;
                }).finally(() => {
                    isRefreshing = true
                })
            }
        }
        return Promise.reject(error)
    })

// 刷新token请求
function refreshToken() {
    return axios.post(`${baseUrl}/api/blade-auth/oauth/token?tenantId=000000&username=DP001&password=efc3d451b28e58fdbffde31ec4c37b86&grant_type=password&scope=all&type=account`, null, {
        headers: {
            'Tenant-Id': '000000',
            'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
        }
    });
}

export default service

创建文件

创建一个文件ipConfig.js，用来存放我们的开发接口和生产接口地址

var productionUrl = '' // 生产环境接口
var DevelopmentUrl = '' // 开发环境接口
export const baseUrl = process.env.NODE_ENV === 'production' ? productionUrl : DevelopmentUrl

api接口封装

创建一个文件 LargeScreenData.js，用来封装我们请求的接口。如果接口是get类型method就设置为get post类型method就设置为post.

import request from '../request'
import qs from 'qs'

// post登录
export function login(data) {
    return request({
        url: '/api/login',
        method: 'post',
        data
    })
}

// get登录
export function getLogin(data) {
    console.log(data, 'data')
    return request({
        url: '/api/login?' + qs.stringify(data),
        method: 'get',
        data
    })
}

接口请求实例

引入我们要请求的接口

import {getLogin} from "@/api/api/LargeScreenData.js";

请求接口获取数据

我们使用async和await来请求接口获取数据。

mounted() {
    this.getData()
},
methods: {
async getData() {
  try {
    const res = await getLogin({user: 'admin', password: '123456'});
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},