vue怎样封装接口

Vue可以使用axios来发送HTTP请求,通过封装axios可以实现接口的统一管理和调用。下面是一个简单的封装接口的示例。

  1. 安装axios

在项目中安装axios依赖,可以使用npm或者yarn命令进行安装。

复制代码
npm install axios --save
  1. 创建api.js文件

在项目中创建一个api.js文件,用于存储封装后的接口请求方法。

javascript 复制代码
import axios from 'axios';

const baseUrl = 'https://api.example.com';

const http = axios.create({
  baseURL: baseUrl,
  timeout: 10000
});

export const getSomeData = (params) => {
  return http.get('/someData', {params})
}

export const postSomeData = (data) => {
  return http.post('/someData', data)
}

export const deleteSomeData = (id) => {
  return http.delete(`/someData/${id}`)
}
  1. 调用接口

在需要调用接口的地方,引入api.js中的方法并调用即可。

javascript 复制代码
import { getSomeData } from './api.js';

getSomeData({id: 1}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

通过这种方式封装接口,可以方便地管理接口和调用接口,同时也可以在统一的地方进行拦截、处理请求结果等操作。

相关推荐
中微子10 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102425 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y41 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
vvilkim1 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript