封装axios接口请求的思路

最新推荐文章于 2025-04-18 09:00:03 发布

「已注销」

最新推荐文章于 2025-04-18 09:00:03 发布

阅读量900

点赞数

文章标签： vue.js javascript es6 css3 html5

本文链接：https://blog.csdn.net/can0101/article/details/106756893

版权

本文将介绍如何在Vue.js项目中封装axios接口请求。首先，需要安装axios库，然后在src目录创建http文件夹，包含api.js和request.js两个文件。api.js用于定义接口，request.js负责封装请求方法。最后，在组件中可以方便地调用这些封装好的接口进行数据请求。

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

装axios接口请求的思路

1、安装axios

npm install axios

2、在src目录下新建一个http文件夹

3.在http下新建两个文件：

api.js(用来统一数据请求接口)；

request.js（封装数据请求方法）；

4、request.js文件

/* eslint-disable quotes */
/* eslint-disable dot-notation */
// 引入axios
import axios from 'axios'
import {
    Message } from 'element-ui'

const service = axios.create({
   
  // 请求接口地址
  baseURL: 'https://www.liulongbin.top:8888/api/private/v1',
  // 设置延迟时间
  timeout: 3000
})

// 请求拦截
service.interceptors.request.use(config => {
   
  console.log('请求被拦截')