Vue项目封装 axios请求（直接复制可用）

Vue项目axios请求封装实践

最新推荐文章于 2024-09-27 11:04:30 发布

原创

最新推荐文章于 2024-09-27 11:04:30 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #axios

本文介绍了如何在Vue项目中封装axios请求。首先通过安装axios，然后在src目录下创建request文件来配置请求头和拦截器。接着，将接口封装到api文件夹中，方便管理和调用。最后，说明了如何在项目文件中引入并使用这些封装好的接口。

首先先在你的项目中安装 axios 官方文档

$ npm install axios

安装完成之后可以在 package.json 文件中看到
在这里插入图片描述
然后在项目 src 文件夹下创建一个文件来进行请求的封装

然后 request 文件是对 axios 的处理，里面包含请求头的配置以及请求拦截和响应拦截相关的一些配置，api 文件夹主要就是对接口的封装。项目中用到的接口都可以写到这里面

1. 先看 request 文件

在这里插入图片描述

// 这是一个封装请求接口的文件
import axios from 'axios' //将安装好的axios引入进来

// 创建一个axios请求实例   详细请看axios官网文档  https://www.axios-http.cn/docs/instance
//这里可以配置公共的请求头   超时时间等
const instance = axios.create({
   
   
    baseURL: 'https://www.xxxxxxxx.com', //这里写自己公司的请求接口
    timeout: 5000, //请求超时时间