封装axios接口请求的思路

最新推荐文章于 2025-10-31 01:43:50 发布

原创

最新推荐文章于 2025-10-31 01:43:50 发布 · 918 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #es6 #css3 #html5

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

装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('请求被拦截')

  if