Vue对axios的封装及使用

派大星是bug？

已于 2024-01-19 11:00:08 修改

阅读量990

点赞数 14

分类专栏：大前端进阶文章标签： vue.js 前端 javascript

于 2024-01-19 10:55:09 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45609702/article/details/135691562

版权

本文介绍了如何通过npm安装并封装axios库，实现接口的统一管理和调用，包括设置基础URL、请求拦截、响应拦截以及在主入口文件中引入。还展示了如何在api文件中对外导出接口函数供其他模块调用。

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

文章目录

概要

封装axios让调用接口变得轻量、简单

先安装 axios通过npm 或者 yarn 安装 axios

1、通过npm安装axios

npm install axios

2、在主入口文件main.js中引用

import axios from 'axios'
 
Vue.use(axios);

3、创建文件夹`http`,再创建文件`index.js`进行封装

配置请求拦截器和响应拦截器,请求前缀等

import axios from "axios";


const http = axios.create({
   
    // baseURL 将自动加在 url`前面，除非 url 是一个绝对 URL。
    // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
    baseURL: "/api",
    // timeout设置一个请求超时时间，如果请求时间超过了timeout，请求将被中断，单位为毫秒（ms）
    timeout: 6000,
    // headers是被发送的自定义请求头，请求头内容需要根据后端要求去设置，这里我们使用本项目请求头。
    headers: {
   
        'X-Custom-Header': 'foobar',
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {<