封装axios接口请求的思路

本文将介绍如何在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('请求被拦截')

  if 
### 封装 Axios 并实现跨域请求 #### 创建 Axios 实例并设置默认配置 为了更好地管理和维护 HTTP 请求,在 `src/utils` 文件夹下创建名为 `http.ts` 的文件来封装 Axios。通过这种方式可以集中处理全局配置,如基础 URL 和拦截器。 ```typescript // src/utils/http.ts import axios, { AxiosInstance, AxiosRequestConfig } from &#39;axios&#39;; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout }); service.interceptors.request.use( (config: AxiosRequestConfig) => { const token = localStorage.getItem(&#39;token&#39;); if (token && config.headers) { config.headers[&#39;Authorization&#39;] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); export default service; ``` 此部分代码定义了一个带有预设选项的新 Axios 实例,并设置了请求前缀路径以及超时时间[^1]。 #### 处理 API 接口管理 按照模块化思路设计API接口层结构,即在 `src/api` 下按功能划分不同子目录存放各自业务逻辑对应的接口函数。例如: ```plaintext ├── api/ │ ├── user.ts # 用户相关接口 │ └── product.ts # 商品相关接口 └── utils/ └── http.ts # Axios实例和服务端交互工具类 ``` 对于具体的接口调用,则可以在相应的 `.ts` 文件内编写如下所示的方法: ```typescript // src/api/user.ts import service from &#39;@/utils/http&#39;; export function getUserInfo(params?: any): Promise<any> { return service.get(&#39;/user/info&#39;, { params }); } ``` 上述例子展示了如何利用之前建立好的 Axios 实例发起 GET 类型的数据获取操作[^3]。 #### 配置 Vite 开发环境下的代理服务器以解决开发阶段的 CORS 错误 由于浏览器同源策略限制,默认情况下前端应用无法直接向不同的域名发送 AJAX 请求。为此可以通过修改构建工具(这里是Vite)的相关配置项来绕过这一障碍。编辑项目的根目录中的 `vite.config.ts` 或者 `vite.config.js` 添加代理规则: ```javascript // vite.config.ts or vite.config.js import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; export default defineConfig({ plugins: [vue()], server: { proxy: { &#39;/api&#39;: { target: &#39;https://example.com&#39;, changeOrigin: true, rewrite: path => path.replace(/^\/api/, &#39;&#39;) } } } }); ``` 这段配置使得当访问 `/api/*` 路径时会被转发到指定的目标地址上执行实际的服务端程序[^4]。 #### 生产环境中部署反向代理服务 除了开发期间借助本地代理外,在生产环境下通常还需要依靠 Nginx 等 Web Server 来完成正式上线后的跨域资源共享(CORS)支持工作。这涉及到调整后端应用程序的安全性和权限控制机制,确保只允许来自特定来源的应用能够成功读取资源数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值