分享:一步一个脚印,vue入门之对vue项目中api接口的封装管理

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

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

分享:一步一个脚印,vue入门之对vue项目中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 }) }

分享:一步一个脚印,vue入门之对vue项目中api接口的封装管理

注:1、此处我们使用了axios进行http请求,具体知识点和使用在以后的文档中再记录。

2、此处表达式为ES6(ECMAScript6)的箭头函数。ES6的可自行学习《ECMAScript 6 入门》。

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

import * as api from './api'

export default api

分享:一步一个脚印,vue入门之对vue项目中api接口的封装管理

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

分享:一步一个脚印,vue入门之对vue项目中api接口的封装管理

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

相关推荐