面试题：Vue中如何使用axios进行异步数据请求并处理响应结果

安装axios：
- 如果项目使用npm，在项目根目录下运行npm install axios --save。
- 如果使用yarn，运行yarn add axios。

配置axios实例：

在项目src目录下，创建一个api文件夹（可自定义），在其中新建一个request.js文件。

import axios from 'axios';

// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // 基础接口地址，可在.env文件中配置
    timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 可以在这里添加token等请求头信息
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code!== 200) {
            // 根据后端返回的错误码处理错误
            return Promise.reject(new Error(res.message || 'Error'));
        } else {
            return res;
        }
    },
    error => {
        return Promise.reject(error);
    }
);

export default service;

发送请求获取用户列表：

在需要获取用户列表的组件中，例如UserList.vue：

<template>
    <div>
        <ul>
            <li v - for="user in userList" :key="user.id">{{user.name}}</li>
        </ul>
    </div>
</template>

<script>
import request from '@/api/request';

export default {
    data() {
        return {
            userList: []
        };
    },
    created() {
        this.fetchUserList();
    },
    methods: {
        async fetchUserList() {
            try {
                const response = await request.get('/user/list');// 根据后端接口实际路径修改
                this.userList = response.data;
            } catch (error) {
                console.error('获取用户列表失败', error);
            }
        }
    }
};
</script>

处理成功和失败的响应结果：
- 成功响应：在response.use的第一个回调函数中（上述request.js中的响应拦截器部分），判断后端返回的状态码，若状态码表示成功（如res.code === 200），返回响应数据res。在组件中通过await获取到成功响应的数据，并更新组件数据（如this.userList = response.data）。
- 失败响应：在response.use的第二个回调函数中，捕获响应错误，在组件的catch块中（如catch (error) { console.error('获取用户列表失败', error); }）可以进行错误提示等处理，也可以在请求拦截器的错误回调中对请求错误进行处理。

星途面试题库

面试题：Vue中如何使用axios进行异步数据请求并处理响应结果

知识考点

面试题答案