uView

# 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);
})

← 节流防抖 →