# API集中管理

这里说的集中管理,是指把各个请求,统一放到一个文件中进行管理,这样的好处是不用每次调用this.$u.get时都需要传入url参数,一些固定的 请求参数也可以不用显式的传入,如下为配置后的使用示例:

this.$u.api.getSearch().then(res => {
	console.log(res);
})

# 前言

在进行这个配置之前,建议先配置请求的拦截器,本示例和和拦截器是一脉相承的,请移步:Http拦截器

# 准备工作

在根目录新建/common/http.api.js,如已有common目录,创建http.api.js即可。

# 说明

本文件的内部大体结构,和请求拦截器的内部结构基本一致,都是通过在 main.js中引入创建的app(也即页面的this)对象,实现在内部 对各个参数的处理,在请求拦截器部分有关于内部各个参数的详细介绍,详见:Http拦截器

以下为/common/http.api.js的内部内容,说明都在注释中,请举一反三,灵活配置即可:

// /common/http.api.js

// 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分)
let hotSearchUrl = '/ebapi/store_api/hot_search';
let indexUrl = '/ebapi/public_api/index';

// 此处第二个参数vm,就是我们在页面使用的this,你可以通过vm获取vuex等操作,更多内容详见uView对拦截器的介绍部分:
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
	// 此处没有使用传入的params参数
	let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
		id: 2
	});
	
	// 此处使用了传入的params参数,一切自定义即可
	let getInfo = (params = {}) => vm.$u.post(indexUrl, params);
	
	// 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
	vm.$u.api = {getSearch, getInfo};
}

export default {
	install
}

# 引入

我们上面是创建和配置了http.api.js,接下来需要在main.js中进行挂载,如果您配置了拦截器,这部分的引入代码,需要写在拦截器引入的后面:

// 其他已有内容
const app = new Vue({
  ...App
})

// http拦截器,将此部分放在new Vue()和app.$mount()之间,才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)

// http接口API集中管理引入部分
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)

app.$mount()

# 使用

经过以上配置后,我们可以在各个页面的js中方便的调用各个接口,如下示例:

// 调用getSearch接口
this.$u.api.getSearch().then(res => {
	console.log(res);
})

// 调用getInfo接口
this.$u.api.getInfo({id: 3}).then(res => {
	console.log(res);
})
本站由 提供CDN及云存储服务