Home

Guia de uso

• Como definir o RequestProvider e invocar a action?

Primeiramente deve-se definir o provider, tal qual representado a seguir:

<show-request-provider
		ref="myService"
		:service="getCities"
		@success="handleGetCitiesSuccess"
>
		<!-- container -->
</show-request-provider>

Para chamar o service programaticamente invoque a action do RequestProvider por referência: this.$refs.myService.action(); . É possível definir action como v-slot e chamar dentro do container, mas o mais usual é fazer a chamada dentro do script utilizando a referência.

O evento @success possui um parâmetro que é o retorno da requisição. Para exibir o resultado no console, por exemplo, pode-se adicionar o método handleGetCitiesSuccess(data) { console.log(data); } no script.

• Como eu faço para enviar uma requisição com payload?

É possível enviar uma payload na requisição setando esse atributo na definição do provider, tal qual apresentado abaixo:

<show-request-provider
		ref="myService"
		:service="postCity"
		:payload="postCityPayload"
		@success="handlePostCitySuccess"
>
		<!-- container -->
</show-request-provider>

• Como eu acesso os estados da requisição com o SHOW?

É possível enviar uma payload na requisição setando esse atributo na definição do provider, tal qual apresentado abaixo:

<show-request-provider
		ref="myService"
		v-slot="{ loading: loadingGetCities, failed: failedGetCities }"
		:service="getCities"
		@success="handleGetCitiesSuccess"
>
		<div>
			<div v-if="loadingGetCities">
					Carregando cidades...
			</div>
			<div v-else-if="failedGetCities">
					Falha ao buscar cidades...
			</div>
			<div v-else>
					<!-- content-->
			</div>
		</div>
</show-request-provider>

Usualmente é utilizado apenas o loading dessa forma e a falha é tratado por um handler do evento @error emitido pelo RequestProvider.

• Como eu personalizo a mensagem de sucesso da requisição?

Por padrão o RequestProvider não exibe uma mensagem de sucesso, cabendo ao desenvolvedor setar o showSuccessFeedback como true para exibir o alerta padrão do componente, ou um personalizado pela configuração successSwalConfig. Ainda há outra opção, que é lidar com isso de forma externa ao componente no handler do @success.

<show-request-provider
		ref="myService"
		:service="putCities"
		:payload="putCitiesPayload"
		show-success-feedback
		:success-swal-config="putCitiesSwalConfig()"
		@success="handlePutCitiesSuccess"
>
		<!-- container -->
</show-request-provider>

A maneira mais usual é utilizar o showSuccessFeedback enviando a configuração do alerta tal qual apresentado acima.

• Como eu personalizo a mensagem de erro da requisição?

O padrão do RequestProvider é exibir um alerta em caso de falha. Esse alerta pode ser ocultado, utilizando a prop hideErrorFeedback como true, ou personalizado utilizando o errorSwalConfig. Outra alternativa é lidar com isso de forma externa ao componente no handler do @error.

<show-request-provider
		ref="myService"
		:service="getCities"
		hide-error-feedback
		@success="handleGetCitiesSuccess"
		@error="handleCitiesNotFound"
>
		<div>
			<div v-if="notFound">
					Não foi encontrada nenhuma cidade
			</div>
			<div v-else>
					<!-- content-->
			</div>
		</div>
</show-request-provider>

Usualmente o erro é exibido como o padrão do RequestProvider mesmo. Em alguns casos a falha da requisição não impede o usuário de seguir o fluxo então o feedback é ocultado, e nenhuma configuração adicional é feita.

• Como fazer requisição imediatamente após montar o componente?

Como mencionado no início para invocar a ação do service, deve se chamar a action`` do RequestProvider, seja utilizando $refs`` ou definindo como v-slot. Mas no caso em que a requisição deve ser feita logo que o componente é montado é possível utilizar a prop `immediate`. tal qual apresentado abaixo:

<show-request-provider
		ref="myService"
		:service="getCities"
		immediate
		@success="handleGetCitiesSuccess"
>
		<!-- container -->
</show-request-provider>

• Como definir o service dinamicamente?

Em casos que o service muda de acordo com alguma condição mas o conteúdo padrão é o mesmo é possível definir o service como um método que retorna um método, como a seguir:

<show-request-provider
		ref="myService"
		:service="putOrPostService"
		:payload="putCitiesPayload"
		show-success-feedback
		:success-swal-config="putCitiesSwalConfig()"
		@success="handlePutCitiesSuccess"
>
		<!-- container -->
</show-request-provider>

<script>
export default {
	computed: {
		putOrPostService() {
			if (this.shouldBePostService) {
				return this.postCities;
			}
			return this.putCities;
		},
};

Mas vale observar que é uma melhor prática que a criação e a edição sejam feitos em componentes/páginas separadas.

• Como utilizar os RequestProvider aninhado?

Outra prática que é preferível ser evitada, é aninhar RequestProvider. Mas se necessário você pode fazer isso prestando bastante atenção aos escopos de cada slot.

<show-request-provider
		ref="myService"
		v-slot="{ loading: loadingGetCities }"
		:service="getCities"
		@success="handleGetCitiesSuccess"
>
		<!-- ... -->
		<show-request-provider
				ref="myOtherService"
				v-slot="{ loading: loadingDeleteCity }"
				:service="deleteCity"
				@success="handleDeleteCitySuccess"
		>
				<!-- ... -->
		</show-request-provider>
</show-request-provider>

Referência

Props

Nome	Descrição	Predefinição
service required	Function Função que define o serviço (requisição definida com o axios) que será chamado quando o provider for acionado	undefined
payload	Object Define os parâmetros que serão passados na requisição ao acionar o provider	{ }
payloadResolver	Function Por padrão as chaves do payload são convertidas para snake_case padrão usado no backend. Caso deseje manipular as informações do payload que serão enviados na requisição pode-se utilizar essa prop.	(data) => convertKeysToSnakeCase(data)
dataResolver	Function Por padrão as chaves do response.data que vem em snake_case do backend são convertivas em camelCase, padrão usado no frontend. Caso deseje manipular as informações do data que serão retornadas na requisição pode-se utilizar essa prop.	(data) => convertKeysToCamelCase(data)
successSwalConfig	Object Configuração do alerta (swal) para a mensagem de sucesso.	( ) => SUCCESS_SWAL_DEFAULT_CONFIG
errorSwalConfig	Object Configuração do alerta (swal) para a mensagem de erro.	( ) => ERROR_SWAL_DEFAULT_CONFIG
errorFeedbackResolver	Function Define como deve se dá o feedback de erro. Quando setado o alerta padrão não é exibido.	null
successFeedbackResolver	Function Define como deve se dá o feedback de sucesso. Quando setado o alerta padrão não é exibido.	null
showSuccessFeedback	Boolean Quando setado como true exibe um alerta padrão de sucesso	false
hideErrorFeedback	Boolean Quando setado como true omite o alerta de erro padrão	false
immediate	Boolean Quando setada como true essa prop aciona o service ao montar o componente	false
forceResetError	Boolean Quando muda seu valor para true força o objeto error a ser resetado	false
initialData	Object	null

Slots

Nome	Descrição
loading	Boolean Representa o estado "carregando" da requisição
failed	Boolean Representa o estado "falha" da requisição, quando algum erro ocorreu e não foi possível concluir a requisição
error	Object Retorno da requisição (response.error) em caso de falha
data	Object Retorno da requisição (response.data) em caso de sucesso
action	Function Função que chama o service passado por prop
labelHelper	String Retorna um fallback caso o estado loading esteja true
errorMessage	String Retorna a primeira mensagem de erro da requisição ou uma mensagem de erro genérica caso ocorra algum erro na requisição

Eventos

Nome	Descrição
success	Evento emitido quando a requisição é realizada com sucesso, e retorna o response.data
success-feedback-ok	Evento emitido quando o ok-button do alerta padrão de sucesso é acionado, e retorna o response.data
error	Evento emitido quando ocorre um erro na requisição, e retorna o response.error
error-feedback-ok	Evento emitido quando o ok-button do alerta padrão de erro é acionado, e retorna o response.error
error-feedback-cancel	Evento emitido quando o cancel-button do alerta padrão de erro é acionado, e retorna o response.error