vue入门：对vue项目中api接口的封装管理

傷城~ 2022-02-17 07:28 228阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

很多朋友在开发过程中，习惯性直接将api的调用写在单个组件之中，就直接调用请求。例如：

![Image 1][]

在前端项目开发中，从整体架构出发，我们可以将项目中所有api进行封装，从而便于我们进行统一管理。

在src目录下，新建api文件夹，在api文件夹下创建index.js和api.js。

**1、api.js。主要用来统一管理项目所有api请求。**如下：

import axios from 'axios'

let host = window.g.ApiUrl

// 获取主页信息

export const getindex = params => \{ return axios.get(\`$\{host\}/api/index/\`, \{ params: params \}) \}

// 获取城市信息

export const getcity = params => \{ return axios.get(\`$\{host\}/api/city/\`) \}

// 获取详细信息

export const getdetail = params => \{ return axios.get(\`$\{host\}/api/detail/\`, \{ params: params \}) \}

// 注册

export const postRegister = params => \{ return axios.post(\`$\{host\}/api/register/\`, \{ params: params \}) \}

![Image 1][]

api.js

> 注：1、此处我们使用了axios进行http请求，具体知识点和使用在以后的文档中再记录。
> 
>        2、此处表达式为ES6（ECMAScript6）的箭头函数。ES6的可自行学习[《ECMAScript 6 入门》][ECMAScript 6]。

**2、index.js。主要用来输出api，供外部引入。**如下：

import \* as api from './api'

export default api

![Image 1][]

index.js

**3、在组件中调用api接口**。例如：

![Image 1][]

home.vue

这样，我们就可以在api.js中查阅到项目中所有api接口的调用，便于接口的管理。

作者：dell\_ling  
链接：https://www.jianshu.com/p/f6fd6fd73000

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[ECMAScript 6]: http://es6.ruanyifeng.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中Axios的封装与API接口的管理详解

*一：axios的封装** vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是promise的http库，可运行在浏览器端和node.js中。 ...

迷南。/ 2024年04月17日 15:48/ 0 赞/ 91 阅读

相关 vue项目-封装API接口

.在/src/下创建一个js文件 AxiosAsk.js import Vue from 'vue' import axios from 'axios'...

曾经终败给现在/ 2024年04月17日 14:13/ 0 赞/ 90 阅读

相关 vue中Axios的封装和API接口的管理

转自：[https://juejin.im/post/5b55c118f265da0f6f1aa354][https_juejin.im_post_5b55c118f265da

墨蓝/ 2023年06月28日 08:55/ 0 赞/ 30 阅读

相关对vue项目中api接口的封装管理

很多朋友在开发过程中，习惯性直接将api的调用写在单个组件之中，就直接调用请求。例如： ![format_png][] 在前端项目开发中，从整体架构出发，我们可以将项

一时失言乱红尘/ 2023年06月28日 06:15/ 0 赞/ 33 阅读

相关 Vue中API封装

实现功能接口api化请求自动绑定防止重复提交 API封装 1、src目录下新建api文件夹 index.js ---- 接口总路由 /

阳光穿透心脏的1/2处/ 2023年02月20日 13:38/ 0 赞/ 38 阅读

相关 Vue中Axios封装API接口的方法

参考此博文[vue2.x搭建saas项目系列之七：API接口及常量、基础数据统一维护][vue2.x_saas_API] [vue2.x_saas_API]: https:

女爷i/ 2022年11月09日 14:21/ 0 赞/ 224 阅读

相关 vue中Axios的封装和API接口的管理

一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很

缺乏、安全感/ 2022年05月17日 08:12/ 0 赞/ 222 阅读

相关 vue入门：对vue项目中api接口的封装管理

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

傷城~/ 2022年02月17日 07:28/ 0 赞/ 229 阅读

相关 vue中使用axios封装接口，对api统一管理

-------------------- 要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) ----

左手的ㄟ右手/ 2021年12月11日 02:07/ 0 赞/ 346 阅读

相关 vue项目封装api

设计思路　　为了加强项目的可维护性，建议将请求接口api进行统一封装，　　一个常规项目的基础地址一般为唯一，所以考虑将基础地址设定一个变量 let baseUrl:

心已赠人/ 2021年11月27日 07:06/ 0 赞/ 254 阅读