Adquira o hábito de escrever juntos! Este é o 8º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .
Recapitular
Ao escrever normalmente 小项目, você pode não se importar tanto com o armazenamento da interface de requisição, afinal, pode haver apenas uma dúzia ou vinte interfaces em todo o projeto. Quando há um problema, ele pode ser facilmente localizado.
No entanto, quando o número de interfaces atingir 100 níveis, ocorrerão problemas como ajuste de interface . Se houver 捉襟见肘mais pontos, pode demorar muito para encontrar uma interface de API. Além disso, algumas interfaces podem ser usadas em muitos lugares.Se essa interface for melhor, meu caro, levará uma hora ou duas para modificar o endereço ou os parâmetros da interface, o que afetará a eficiência e o clima de desenvolvimento.
É 将api模块解耦出来aqui que se torna particularmente importante. Agora reunimos várias soluções para gerenciamento unificado de APIs, cada uma com seus próprios méritos, e as vantagens e desvantagens específicas ainda precisam ser discutidas pelos funcionários.
Ele é voltado para o projeto de andaimes vue, não para o projeto que introduz o vue em html.
Para projetos pequenos (não há axios de pacotes secundários separados)
Não há necessidade de gerenciar, basta fazê-lo diretamente. Limitado a 20-30 portas
Código acima:
<script>
import axios from 'axios';
export default {
methods: {
async request() {
let data = {}
try {
// host指的是请求的域名，path指的是请求的路径， data是相关的参数和请求头配置
let res = await axios.post(`${host}${path}`, {
data
})
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码Gerenciamento de arquivos api.js unificado
Grave todas as informações da interface da API em um arquivo js para manutenção. A solicitação da interface da página pode ser importada diretamente
- Crie a pasta api no diretório raiz e crie index.js
export default {
getInfo: 'https://xxx.x.com/getinfo'
}
复制代码- uso específico da página
<script>
import axios from 'axios';
import api from '@/api/index';
export default {
methods: {
async request() {
let data = {}
try {
let res = await axios.post(api.getInfo, {
data
})
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码Para projetos não pequenos (encapsulamento secundário de axios)
Não vou entrar em detalhes sobre o encapsulamento secundário de axios aqui, quem não entender pode entrar em contato comigo.
Para aqueles com mais de 50 interfaces, o método acima ainda é usado para solicitar a interface. No momento, não é muito amigável para manutenção ou atualização. Neste momento, precisamos de uma solução mais conveniente.
gerenciamento unificado api + montagem para instância vue + módulo único
Ideias: No gerenciamento unificado de api, não apenas gerencie o endereço de solicitação, mas escreva diretamente um método de solicitação de solicitação e perceba a variabilidade aceitando alguns parâmetros.
- api/index.js
import request from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx',
method: 'post/get',
params, // 如果是get请求的话
data: params // 如果是post请求的话
})
}
}
复制代码- em main.js
import Vue from 'vue'
import App from './App.vue'
import api from '@/api/index';
Vue.prototype.$api = api;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
复制代码- usado na página
<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$api.getInfo(data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码gerenciamento unificado api + montar para instância vue + vários módulos
- Vantagem: a interface pode ser chamada de qualquer lugar
- Desvantagem: Se o número de interfaces for grande o suficiente, muitos dados serão anexados à instância vue, o que pode causar problemas de desempenho
- api/modules/account.js
import account from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx',
method: 'post/get',
params, // 如果是get请求的话
data: params // 如果是post请求的话
})
}
}
复制代码- api/index.js
import account from './modules/account'
export default {
account
}
复制代码- em main.js
import Vue from 'vue'
import App from './App.vue'
import api from '@/api/index';
Vue.prototype.$api = api;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
复制代码- Usar na página
<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$api.account.getInfo(data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码gerenciamento unificado api + vuex + módulo único
Ideia: O método de gerenciamento unificado da api permanece inalterado, mas foi alterado para vuex de ser montado na instância vue. Vantagens: Você pode chamar qualquer interface à vontade em qualquer página sem ser montado na instância vue. Desvantagens: Para certifique-se de que a página não será atualizada No caso de um erro, você precisa escrever uma configuração de interface no módulo api, e você também precisa escrever uma vez no módulo store, o que é complicado.
- A escrita em api/index.js permanece inalterada.
- Exclusão de código de montagem relevante em main.js
- store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import api from '@/api/index';
Vue.use(Vuex);
export default new Vuex.Store({
action: {
getInfo(store, params) {
return api.getInfo(params)
}
}
})
复制代码- na página
<script>
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$store.dispatch('getInfo', data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码Claro que você também pode usarmapActions
<script>
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions([ 'getInfo' ])
async request() {
let data = {}
try {
let res = await this.getInfo(data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码gerenciamento unificado api + vuex + vários módulos
Vantagens: Pode ser chamado em qualquer lugar da página Desvantagem: Adicionar, excluir e modificar a mesma interface requer que dois arquivos sejam mantidos ao mesmo tempo
- Para o arquivo api, cada modo é independente um do outro neste momento: api/account.js
import request from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx',
method: 'post/get',
params, // 如果是get请求的话
data: params // 如果是post请求的话
})
}
}
复制代码- store/modules/account.js
import api from '@/api/account';
export default {
namespaced: true,
actions: {
getInfo(store, params) {
return api.getInfo(params)
}
}
}
复制代码- store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import account from './modules/account';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
account
}
})
复制代码- na página
<script>
export default {
methods: {
async request() {
let data = {}
try {
let res = await this.$store.dispatch('account/getInfo', data)
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
复制代码Resumir
- Atualmente, esses métodos têm seus próprios méritos.
- Não sei se há uma maneira melhor de você encontrar uma maneira melhor, digite-a na área de comentários, ficarei grato...