1. 使用场景
前后端分离是如今开发webAPP的最常规开发模式，而axios又是一个在vue项目中“连接”前后端的最有效的一个包。
在调用axios与后端对接API的时候，可能后端的数据会存储在不同的数据库中，在后端设计的时候，经常出现这样的情况:
- http://XXX.XXX.XXX:8080/database1/student/name
- http://XXX.XXX.XXX:8080/database2/student/name
- http://XXX.XXX.XXX:8080/database3/student/name
如果我们配置3个axios文件夹，会使得文件结构变得很冗长和不美观，这时我们需要动态调用BaseURL来切换数据库。
2.解决方案
假设：有 database1, database2.
api文件夹的架构如下：
repositories
│ Repository.js
│ RepositoryFactory.js
│ RepositoryInstance.js
│ userRepository.js
│ bookRepository.js
在 Repository.js中，我们首先create a repository instance
这一步是简单的将axios封装进我们的项目里，如果你只有一个后端路径入口，只需要这个文件就可以对接API了。
import axios from "axios";
/// Creates a repository instance
export default function(urlPortion) {
if (!urlPortion) {
urlPortion = 'database1';
}
let baseURL = `http://example.com/${urlPortion}/`;
let instance = axios.create({
baseURL
});
instance.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
// 对请求错误做些什么
if (error && error.response) {
switch (error.response.status) {
case 400:
alert(error.response.data['info'])
break
}
}
}
)
return function (method, url, data = null) {
method = method.toLowerCase();
if (method === 'post') {
instance.headers = {
'Authorization': AUTH_TOKEN,
'content-type': 'application/json',
}
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 {
// eslint-disable-next-line no-mixed-spaces-and-tabs
console.error("unknow method" + method)
return false
}
}
}
在RepositoryInstance.js中，我们构造一个repo类，后面所有的API都会从这里继承，需要对接哪一个后端数据库，只需要改变继承的参数就行了。
export default class {
constructor(repo) {
this.repo = repo;
}
}
在userRepository.js和bookRepository.js中，我们具体对接后端API
import RepositoryInstance from '@/repositories/RepositoryInstance';
export default class extends RepositoryInstance {
getAllUserNames() {
return this.repo('get', 'all_data/AllUserNames')
}
getAllUserIDS() {
return this.repo('get', 'all_data/AllUserIDS')
}
}
最后，在RepositoryFactory.js中，我们将所有的API抛出.
import Repository from './Repository';
import bookRepository from "./bookRepository"
import userRepository from "./userRepository"
export default function (dbTarget) {
const newRepo = new Repository(dbTarget);
return {
book: new bookRepository(newRepo),
user: new userRepository(newRepo)
};
}
这样就ok了。最后，在element中使用的时候，我们可以使用watch动态监听当前应该用什么数据库，从而动态改变BaseUrl.
import RepositoryFactory from "../../repositories/RepositoryFactory";
export default {
methods:{
getUsernames(){
RepositoryFactory(database1)['user'].getAllUserNames().then(res => {
this.usernames = res.data.usernames
})
}
}
}
3.替代方案：
VUE 官方另外推荐一个原生API，FetchAPI https://developers.google.com/web/updates/2015/03/introduction-to-fetch
同样是一个选择
4. 总结
Axios 的好处是他是基于Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise的库，有很多功能可以基于Promise的API来写，非常方便。
