vue怎样封装接口

简介: vue怎样封装接口

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

  1. 安装axios

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

npm install axios --save
  1. 创建api.js文件

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

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中的方法并调用即可。

import { getSomeData } from './api.js';
getSomeData({id: 1}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

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

相关文章
|
2天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
11 3
|
2天前
|
JavaScript
vue学习(10)事件修饰符
vue学习(10)事件修饰符
11 3
|
2天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
10 2
|
2天前
|
JavaScript
vue学习(11)键盘事件
vue学习(11)键盘事件
9 2
|
3天前
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
|
3天前
|
JavaScript
vue学习(9)事件处理
vue学习(9)事件处理
20 2
|
2天前
|
JavaScript
vue知识点
vue知识点
5 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1036 0
|
4天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
34 11
|
10天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题