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

傷城~ 2022-02-17 07:28 201阅读 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 条评论，201人围观）

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

相关阅读

相关 vue项目-封装API接口

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

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

相关 Vue中API封装

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

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

相关 Vue项目 axios请求封装+接口封装

前言：接口进行封装，方便后期维护 > 先封装axios ( utils => axios.js ) import axios from "axios" i

我会带着你远行/ 2023年01月18日 04:08/ 0 赞/ 299 阅读

相关 axios post body参数_Vue 的axios 封装和 API 接口管理

![e4e192711ae4927526be6d406bb33b29.png][] 作者：愣锤 https://juejin.im/post/684490365288107

一时失言乱红尘/ 2023年01月01日 12:59/ 0 赞/ 209 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue项目封装api

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

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

相关 vue-项目对axios进行封装

需求描述我们在做vue项目的时候，经常会遇到一个问题就是我们的请求需要加请求头，或者还不是一个请求头的情况，那么其实我们可以使用比较原始的办法，直接在我们写的时候就直接

你的名字/ 2021年11月11日 16:16/ 0 赞/ 332 阅读