在vue开辟中，会涉及到许多接口的处置惩罚，当项目足够大时，就须要定义范例一致的接口，怎样定义呢？
要领能够不只一种，本文运用axios+async/await举行接口的一致管理
本文运用vue-cli天生的项目举例
举例
拿segmentfault的官网简朴举个例子，先看一下官网
看下网站，脑补一下背景给出的文档，假如背景不傻的话给出的文档一定分模块的，假定背景给出的文档分为了以下几个模块（假定的，不要叫真哈）
- 资讯模块 (我的定阅、热点资讯)
- 问答模块
- 专栏模块
- 课堂模块
- 圈子模块
- 发明模块
- 个人信息模块
- 用户登录注册模块
- …另有其他许多
一般来说，网站的首页都是庞杂的，会用到许多其他页面也会用到api，所以接口一致管理能够做到api的复用
那末怎样做呢？
着手
1.
起首，在src目次下新建一个文件夹，我这里叫apis，背景供应的一切接口都在这里定义
cd src #切换到src目次
mkdir apis #新建apis文件2.
第二步，依据背景文档分别的模块新建js文件,这里简朴举个例子
- 资讯模块： info.js
- 登录注册模块: member.js
- 个人信息模块 user_info.js
- ….
cd apis #切换到apis目次
touch info.js member.js user_info.js #新建js文件如今的目次大概是这个模样
src
apis
info.js
member.js
user_info.js
main.js3.
第三步，须要引入axios做相应的设置
在apis下新建一个文件夹,叫http.js,在里面做axios相应的设置
touch 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
}
}4.
第四步、在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)5.
第五步，在组件中运用接口
上岸组件Login.js运用登录接口
//Login.vue
<template>
<div>
<input type='text' v-modal='user.userId'>
<input type='text' v-modal='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)实行完,
//把返回值给user_info
let user_info=await LOGIN(this.user)
//2.2假定登录胜利,返回的数据应该是
//user_info={code:200,msg:'success',data:{token:'xxxxx'}}
//然后依据返回的数据做相应的处置惩罚，比方贮存token
}
},
mounted(){
//3. 实行登录
this.login()
}
}
</script>6.
如许定义接口虽然看起来贫苦点，但有以下几个优点：
- 代码看起来范例，一切的接口都在一个文件夹定义，不必疏散的各个组件，保护起来简朴，比方背景的一些url变了，改起来也轻易
- 能够做到接口一次定义，随处运用
比方首页运用了许多api
//index.js 首页的js文件
import {GET_USER_INFO} from 'apis/user_info.js' //用户信息
import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //热点资讯 最新资讯
import {GET_HOT_LECTRUE} from'apis/lectrue.js' //讲座引荐用户界面也会用到用户信息api
//user_info.js用户信息页面
import {GET_USER_INFO} from 'apis/user_info.js' //用户信息就先写到这里了，若有毛病，请在批评区斧正，下次整顿下用户权限相干的内容，包含jwt,token保留和更新,页面权限题目
