vue axios 封装及使用

最新推荐文章于 2025-07-03 03:50:28 发布

原创最新推荐文章于 2025-07-03 03:50:28 发布 · 4.6k 阅读

CC 4.0 BY-SA版权

本文介绍了在Vue项目中如何进行axios的封装，包括创建项目、安装axios、设置网络文件夹结构，以及manager.js、requestMethods.js、api.js、request.js四个关键文件的作用和内容。通过封装，可以更好地管理和使用axios进行后台数据交互。

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

axios 封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

1、首先创建 vue 项目，安装 axios

vue create demo
cd demo
npm i axios vue-axios -S

一般我会在项目的src目录中，新建一个 network 文件夹，然后在里面新建一个 manager.js、 request.js、requestMethods.js、api.js。
manager.js 文件用来封装我们的axios，request.js 文件用来定义的组件内调用的方法，requestMethods.js用来导出配置好的axios实例，api.js用来统一管理我们的接口。

2、manager.js

import axios from "axios"
import { Message} from 'element-ui'

// 调用axios.create方法，配置一些属性，返回一个新的axios
const request= axios.create({
    baseURL: "http://localhost:8080/",
    //请求超时时间
    timeout: 2000
})

// 请求拦截
request.interceptors.request.use(
	//config 代表是你请求的一些信息
    config => {
        // 在请求发送之前的操作
        return config
    },
    error => {
        // 对错误请求的处理
        // 弹出错误请求消息
        Message({
            showClose: true,
            message: error.message,
            type: "error"
        })
        return Promise.reject(error)
    }
)

//  response拦截器 响应拦截器 请求之后的操作
request.interceptors.response.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

export default request;

3、requestMethods.js

// 导出请求方式
export const GET = "get"
export const POST = "post"
export const POT = "pot"
export const DELETE = "delete"

4、api.js

// 
const path = {
    data:"data.json",
}
export default path

5、request.js

import fetch from "./manager"
import path from "./api"
import {GET} from "./requestMethods"

export function getShopList(params){
    return fetch({
        url:path.data,
        method:GET,
        params:params
    })
}

6、在vue组件中使用

// script 标签内
import { getShopList} from "../network/request";
export default {
  created() {
    getShopList()
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
};