axios的二次封装以及配合vue组件中async，await的使用_axios 需要和await搭配使用吗-CSDN博客

本文链接：https://blog.csdn.net/thegiashuaiboy/article/details/138144818

本文介绍了如何在Vue项目中安装和使用axios库，包括创建axios实例、设置基础URL和超时，以及实现请求和响应拦截器。随后展示了如何对axios进行二次封装，供组件间调用API接口使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios的安装

npm i axios --save

aixos的使用

在src目录下创建utils目录，并创建request.js文件

aixos的二次封装

// 引入aixos
import axios from 'axios'

// 创建axios实例
const axiosEp = axios.create({

    // baseurl地址
    baseURL: '',
    timeout: 3000
})

// 请求拦截器
axiosEp.interceptors.request.use(config => {
    // 请求头配置
    config.headers.lang = 'ZH-CN'
    return config
}, err => {
    return Promise.reject(err)
})

// 响应拦截器
axiosEp.interceptors.response.use(res => {
    // 响应状态码
    const { status } = res
    
    if(status == 404) {
        return Promise.reject(res)
    } else if(status == 200 ) {
        return res.data
    } else {
        return res
    }
}, err => {
    return Promise.reject(err)
})

export default axiosEp

api请求接口

在src目录下创建api文件夹以及创建对应的js文件，比如关于用户信息之类的，use.js

// 导入 axios封装模块 axiosEp
import axiosEp from '@/utils/request'

// 用户登录模块
export function getUserInfo(data) {
    return axiosEp({
        url: '/api/user/userInfo', // 请求接口url
        method: 'get', //请求方式
        data // 请求参数
    })
}

组件使用

<script>
    // 导入api模块
    import { getUserInfo } from '@/api/user.js'

    export default {
        data() {
            return {
                form:{}, // 用户输入表单数据
                resData: {} // 接收接口返回数据
            }
        },
        methods: {
            async handLogin(form) {
                this.resData = await getUserInfo(form)
            }
        }
    }
</script>