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

Posted 2023-04-27

参考技术A 在以前的文档中，我们构建了vue项目的整体架构，详见 vue入门：vue项目架构设计起步 ，现在我们主要对其中的api接口封装进行完善，并将过程做个记录，与之分享。

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

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

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

import * as api from './api'

export default api

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

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

vue.js中api接口的统一管理（参考）

前文我们已经封装了axios的get请求和post请求，接下来实现对api接口的统一管理

首先在src/request/下新建api.js文件，然后引入封装的http.js（get，post）

/**
 * api接口统一管理
 */
import { get, post } from ‘./http‘

然后定义接口

/**
 * testGet 接口
 * @param {Object} p 请求参数
 */
export const testGet = p => get(‘api/TestGet  ‘, p)

/**
 * testPost 接口
 * @param {Object} p 请求参数
 */
export const testPost = p => post(‘api/TestPost  ‘, p)

接口定义完成后可在组件中引入api.js并调用接口

//接口调用
import {
    testGet,
    testPost,
} from ‘./../../../../request/api‘;