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

一时失言乱红尘 2023-06-28 06:15 93阅读 0赞

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

![format_png][]

在前端项目开发中，从整体架构出发，我们可以将项目中所有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 \}) \}

![format_png 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

![format_png 2][]

index.js

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

![format_png 3][]

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

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTkzMzk4MS0xMzJmMGUyMDhmZGY0N2I1LnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTkzMzk4MS1jMGQwZTlkMTAxNjM2YzgwLmpwZw?x-oss-process=image/format,png
[ECMAScript 6]: http://es6.ruanyifeng.com/
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTkzMzk4MS1iZDhjZTE1OTcyODE5YWJlLmpwZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTkzMzk4MS02NmY5NDExOThhNjJkZjA5LmpwZw?x-oss-process=image/format,png