Vue 接口管理
春节临近，祝大家新年快乐，猪事顺利，2019就是盘它~
在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？
方法可能不只一种，本文使用axios+async/await进行接口的统一管理。
本文使用vue-cli生成的项目举例。
举例
拿segmentfault的官网简单举个例子，先看一下官网：
举例
看下网站，脑补一下后台给出的文档，如果后台不傻的话给出的文档肯定分模块的，假设后台给出的文档分为了以下几个模块（假设的，不要较真哈）：
- 资讯模块 (我的订阅、热门资讯)
- 问答模块
- 专栏模块
- 讲堂模块
- 圈子模块
- 发现模块
- 个人信息模块
- 用户登录注册模块
- ...还有其他很多
一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到的api，所以接口统一管理可以做到api的复用：
模块划分
那么如何做呢？
动手
第一步
在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义：
cd src // 切换到src目录
mkdir apis // 新建apis文件第二步
按照后台文档划分的模块新建js文件,这里简单举个例子：
- 资讯模块: info.js
- 登录注册模块: member.js
- 个人信息模块: userInfo.js
- ....
cd apis // 切换到apis目录
type NUL > info.js // 新建js文件
type NUL > member.js
type NUL > userInfo.js 现在的目录大概是这个样子：
src
apis
info.js
member.js
userInfo.js
main.js第三步
需要引入axios做相应的配置。 在apis下新建一个文件夹，叫http.js，在里面做axios相应的配置。
type NUL > http.js // 新建http.js文件配置如下：
import axios from 'axios'
// 创建axios的一个实例
var instance = axios.create({
baseURL: xxx,
timeout: 6000
})
// 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default function (method, url, data = null) {
method = method.toLowerCase();
if (method === 'post') {
return instance.post(url, data);
} else if (method === 'get') {
return instance.get(url, {params: data});
} else if (method === 'delete') {
return instance.delete(url, {params: data});
} else if (method === 'put') {
return instance.put(url, data);
} else {
console.error('未知的method' + method);
return false;
}
}配置简要说明一下：
- 引入axios，新建了个axios的实例（axios的实例的axios的功能一样）。
- 请求拦截器响应拦截器不是本文重点，略过。
- 第30行代码及以后是重点，拉出来重点看一下。
/**
* 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
* 函数的参数及返回值如下：
* @param {String} method 请求的方法：get、post、delete、put
* @param {String} url 请求的url:
* @param {Object} data 请求的参数
* @returns {Promise} 返回一个promise对象，其实就相当于axios请求数据的返回值
*/
export default function (method, url, data = null) {
method = method.toLowerCase();
if (method === 'post') {
return instance.post(url, data);
} else if (method === 'get') {
return instance.get(url, {params: data});
} else if (method === 'delete') {
return instance.delete(url, {params: data});
} else if (method === 'put') {
return instance.put(url, data);
} else {
console.error('未知的method' + method);
return false;
}
}第四步
在apis下面的js文件中引入 http.js导出的函数，拿其中一个文件 member.js说明：
// member.js 用于定义用户的登录、注册、注销等
import req from './http.js'
// 定义接口
// 在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
export const LOGIN = params => req('post', '/operator/login', params);
// 这里使用了箭头函数，转换一下写法：
//export const LOGIN=function(req){
// return req('post','/operator/login',params)
//}
// 定义注册接口
export const REG = params => req('post', '/operator/reg', params);
// 定义注销接口
export const LOGOUT = params => req('post', '/operator/logout', params);第五步
在组件中使用接口。 登陆组件 Login.js使用登录接口：
//Login.vue
<template>
<div>
<input type='text' v-model='user.userId'>
<input type='text' v-model='user.pass'>
</div>
</template>
<script>
// 1. 引入登录的接口定义
import {LOGIN} from '../../apis/user.js'
export default {
data () {
return {
user: {
userId: '',
pass: ''
}
}
},
methods: {
// 2. 定义登录的逻辑
async login () {
// 2.1 awiat LOGIN(this.user)
// 等待LOGIN(this.user)执行完,
// 把返回值给userInfo
let userInfo = await LOGIN(this.user);
// 2.2假设登录成功,返回的数据应该是
// userInfo = {code:200, msg: 'success', data: {token:'xxxxx'}}
// 然后根据返回的数据做相应的处理，比如储存token
}
},
mounted () {
//3. 执行登录
this.login();
}
}
</script>第六步
这样定义接口虽然看起来麻烦点，但有以下几个好处：
- 代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便。
- 可以做到接口一次定义，到处使用。
例如首页使用了很多api：
// index.js 首页的js文件
import {GET_USER_INFO} from 'apis/userInfo.js' // 用户信息
import {GET_CURRENT_INFO, GET_HOT_INFO} from 'apis/info.js' // 热门资讯 最新资讯
import {GET_HOT_LECTRUE} from 'apis/lectrue.js' // 讲座推荐用户界面也会用到用户信息api：
// userInfo.js用户信息页面
import {GET_USER_INFO} from 'apis/userInfo.js' // 用户信息本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.02.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录