Ajax-Router是一款 Api 管理工具，可用于普通 Web 应用，也可以用于小程序。可以使用该插件配合你常用请求插件使用，例如 Axios、fetch 和 wx.require 等。
提供了 mock 方法管理工具，更高效的管理 mock 路径。
npm install ajax-router示例文件目录
---
|
|---- Api
| |
| |---- index.js
| |
| |---- main/
| | |
| 略 ｜---- index.js
| |
| 略 （ 同 main 结构）
|
|---- plugins/
| |
| |---- http.js
|
|---- src/
| |
| |---- app.js
配置 Api
具体 Api 被划分为 "公共 Api" 和 "普通 Api" ，公共 Api 需在根目录的 pubRule 中定义。
公共 Api 的路径需要 '/pub' 开头，而普通 Api 则以根目录的 children 的 key 开头，以此类推。
例如：想要访问 main 文件夹下的 getKey 路由，则路由为 /main/getKey
/**
* /Api/index.js
*
* 根目录结构必须由 pubBaseUrl、pubRule 和 children 构成，其他结构会被忽略
*/
import main from './main/index';
module.exports = {
pubBaseUrl: '', // 请求前缀，最终请求地址为 pubBaseUrl + path
pubRule: {
getAll: { // 请求路径为 '/pub/getAll'
mock: true, // 开启mock
type: 'get', // 请求类型
path: '/app/getAll', // 请求地址
},
},
children: {
main
},
};/**
* /Api/main/index.js
*
* 普通目录结构必须由 baseUrl、rule 和 children 构成，其他结构会被忽略
*/
module.exports = {
baseUrl: '', // 请求前缀，最终请求地址为 baseUrl + path
rule: {
getKey: { // 请求路径为 '/main/getAll'
type: 'GET', // 请求类型
path: '/app/main/getKey/:id' // 请求地址,如果 path 中存在 ':' 开头的字段，则会从请求的参数（params）中自动获取相对应字段的数据替换，如参数中不存在该字段则报错
},
user: { // 请求路径为 '/main/user'
type: 'GET', // 请求类型
path: '/app/main/user', // 请求地址
rename: 'getAll' // 路由重定向，如果存在该字段，则路由会忽略当前路由的信息，并跳转至 pubRule 中寻找 rename 字段中的的路由
}
},
children: {}
}配置插件
/**
* http.js
*/
import AjaxRouter from "ajax-router";
import Api from "../Api/index.js";
const ajaxRouter = new AjaxRouter({
prefixAjax: 'https:192.168.0.1:9000', // 请求前缀
ruleData: Api, // Api 数据
ajax: function ({url, method}, resolve, reject) {
// 示例
wx.request({
url,
method,
data: params,
success: function (res) {
// 处理请求
if (res.data.success) {
resolve(res.data.data);
} else {
reject(res.data.data);
}
},
fail: function (err) {
// 重大错误！
wx.showToast({
title: '网络错误，请稍后再试',
icon: 'none',
});
},
});
},
});
export default ajaxRouter;页面上使用
import Http from '../plugins/http.js';
// 公共 Api
Http.request('/pub/getAll', {
// 参数
id: '10000001'
}, {
// 开启 mock ，优先级最高，会覆盖 Api 中 mock 的值
mock: true
}).then(res => {
// 处理逻辑
console.log(res)
}).catch(err => {
// 处理逻辑
console.log(err)
})
// 普通 Api
Http.request('/main/getKey', {
// 参数
id: '10000001' // getKey 路由有 :id 不传会报错
}).then(res => {
// 处理逻辑
console.log(res)
}).catch(err => {
// 处理逻辑
console.log(err)
})该功能配合 mockjs 库使用
如果为其他平台，可以搭建一个简单的 node 服务器来响应
示例文件目录（Vue框架为例）
---
|
|---- Api
| |
| |---- index.js
| |
| |---- main/
| | |
| 略 ｜---- index.js
| |
| 略 （ 同 main 结构）
|
|---- Mock
| |
| |---- index.js
| |
| |---- demo/
| 略 ｜
| |---- index.js
| |
| 略 （ 同 main 结构）
|
|---- plugins/
| |
| |---- http.js
|
|---- src/
| |
| |---- app.js
配置 mock 模块
/**
* /Api/index.js
*
* 编写 Vue 插件
*/
module.exports = {
install: function () {
// 引入 demo 模块
require('./demo/index')
}
}/**
* /Mock/demo/index.js
*
* 编写 mock
*/
import Mock from 'mockjs'
import Vue from 'vue' // 引入 Vue
// 通过 Vue.prototype.$mock 快速获取拦截地址
Mock.mock(Vue.prototype.$mock('/main/getKey').url, function (options) {
console.log(options) // 请求信息
return {} // 返回结果
})配置插件
/**
* http.js
*/
import AjaxRouter from "ajax-router";
import Api from "../Api/index.js";
import axios from 'axios'
import mock from "./mock"
const ajaxRouter = new AjaxRouter({
// 通用数据
ruleData: Api, // Api 数据
// mock 方法依赖属性
mock: process.env.NODE_ENV === 'development', // mock 为 true 时允许开启 mock 拦截
prefixMock: 'https:192.168.0.1:9000/mock', // mock 请求的前缀
lazy: () => Vue.use(mock), // 懒加载，只有当项目中有接口开启了 mock 才会加载 mock 拦截器
isRegExp: true, // mock 方法返回的 URL 是否为 RegExp
// requesr 方法依赖属性
prefixAjax: 'https:192.168.0.1:9000', // 请求前缀
ajax: function ({url, method}, resolve, reject) {
// 示例
axios({
url,
method,
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
},
});
Vue.prototype.$mock = ajax.mock.bind(ajax) // 全局挂载 mock 管理器
Vue.prototype.$api = ajax.request.bind(ajax) // 全局挂载 api 管理器页面上使用
this.$api('/main/getKey', {}, {mock: true}) // 将 mock 设置为 true , 开启拦截器