vue+alova 시작하기

*알로바? 이게 대체 뭐야? *

들어보지 못한 것이 정상입니다. MVVM 프로젝트에서 다양한 요청 시나리오의 문제를 해결하는 데 사용되는 RSM 구현 라이브러리이며 서버 측 상태를 관리하는 데 도움이 될 수도 있습니다.

그것은 마치 무장한 액시오스 라이브러리와 같으며, 액시오스에 날개를 더합니다.

To learn more about RSM, please refer to

이 글은 vue+alova에 대한 기본 소개입니다. 다음을 배울 수 있습니다.

alova가 빈번한 요청을 처리하고, 모듈 전체에서 서버 상태를 업데이트하고, 퍼지 검색을 수행하는 방법

vue 프로젝트에서 alova가 서버 상태 관리를 지원하는 방식

알로바 원활하게 사용하는 방법

다음 시작하기 가이드에서는 todo를 예로 들어 다양한 날짜에 대한 todo 목록을 가져오고, todo 세부 정보를 보고, 항목을 생성, 편집 및 삭제하는 데 필요한 사항을 설명합니다!

alova install: npm install alova --save-dev

alova 인스턴스 초기화

alova 인스턴스는 사용 시작 지점이며 모든 요청은 여기에서 시작해야 합니다. axios 와 같이 작성되며 다음은 alova 인스턴스를 생성하는 가장 간단한 방법입니다.

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';
const alovaInstance = createAlova({
  // Suppose we need to interact with the server for this domain
  baseURL: 'https://api.todo.com',

  // Introduce VueHook under the vue project, which can help us create request-related states that can be managed by alova using vue's ref function
  statesHook: VueHook,

  // Request adapter, here we use fetch request adapter
  requestAdapter: GlobalFetch(),

  // Set a global request interceptor, similar to axios
  beforeRequest(config) {
    // Suppose we need to add the token to the request header
    config.headers.token = 'token';
  },

  // Response interceptor, also similar to axios
  async responsed(response, config) => {
      const json = await response.json();
      if (json.code !== 200) {
        // When an error is thrown here, it will enter the request failure interceptor
        throw new Error(json.message);
      }
      return json.data;
    },
});

할 일 목록 - 인터페이스 렌더링을 위해 alova가 관리하는 상태를 직접 사용

이 데모의 인터페이스는 다음과 같습니다.


useRequest 를 사용하여 요청을 보냅니다. 이는 페이지가 초기화된 데이터를 가져오는 가장 일반적인 방법입니다.

const todoListGetter = alovaInstance.Get('/todo/list');

const {
  // loading is the loading state value, when it is loaded, its value is true, and it is automatically updated to false after the end
  // It is a value of type Ref, you can access it through loading.value, or bind directly to the interface
  loading,

  // response data
  data: todoList,

  // Request error object, it has a value when the request is wrong, otherwise it is undefined
  error,

  // successful callback binding
  onSuccess,

  // Failed callback binding
  onError,

  // complete callback binding
  onComplete,

  // Directly pass in the Method object to send the request
} = useRequest(todoListGetter, {
  // initial data data
  initialData: [],
});

// ###### callback settings
onSuccess(todoListRaw => {
  console.log('The request is successful, the response data is:', todoListRaw);
});
onError(error => {
  console.log('The request failed, the error message is:', error);
});
onComplete(() => {
  console.log('The request is completed, it will be called regardless of success or failure');
});

다음으로 렌더링 인터페이스에 todoList를 렌더링합니다. 완료!

<div v-if="loading">Loading...</div>
<div v-else-if="error" class="error">{{ error.message }}</div>
<template v-else>
  <div v-for="todo in todoList">
    <div class="todo-title">{{ todo.title }}</div>
    <div class="todo-time">
        <span class="time">{{ todo.startTime }}</span>
        to
        <span class="time">{{ todo.endTime }}</span>
    </div>
  </div>
</template>

todo 편집 페이지 - 자주 요청되는 데이터를 메모리에 캐시

편집 페이지는 다음과 같습니다.



여기서 시나리오를 고려해야 합니다. 사용자는 할 일 항목을 여러 번 클릭하여 몇 초 안에 볼 수 있으며, 입력할 때마다 서버에 요청하는 것은 약간 낭비입니다. 이때 프런트 엔드 캐싱 레이어를 수행하여 표시 속도를 개선하고 서버의 부담을 줄일 수 있습니다. .

const todoDetail = id => alovaInstance. Get(`/todo/${id}`, {
    // Set a 5-minute local memory cache, refresh will be invalid
    localeCache: 5 * 60 * 1000,
});
const {
  loading,

  // response data
  data: todoDetail,

  error,
} = useRequest(todoDetail(params.id));

페이지 렌더링 코드

<div v-if="loading">loading...</div>
<div v-else>
    <input v-model="todoDetail.title" />
    <input v-model="todoDetail.date" />
    <input v-model="todoDetail.startTime" />
    <input v-model="todoDetail.endTime" />
    <!-- ... -->
    <button @click="handleAddTodo">Submit data</button>
</div>

데이터 제출 코드 - 수동으로 할 일 목록 데이터 업데이트

const createTodoPoster = newTodo => alova.Post('/todo', newTodo);
const {
  loading,
  data,
  error,

  // The function of the manual sender request, the request is sent after the call
  send: submitTodo,
} = useRequest(() => createTodoPoster(todoDetail.value), {
  // When immediate is false, no more requests are made during initialization
  immediate: false
});


// Manually send the request
const handleAddTodo = () => {
  submitTodo()
    .then(result => {
      // Update the list data, get the status of the todo list, and return the updated data
      updateState(todoDetail(params.id), todoListData => {
          const index = todoListData.findIndex(({ id }) => id === params.id);
          todoListData[index] = todoDetail.value;
          return todoListData;
      });
    })
    .catch(error => {
      console.log('Failed to add todo item, the error message is:', error);
    });
};

퍼지 검색 할일 항목

퍼지 검색 기능은 키워드를 입력하는 과정에서 지속적으로 요청을 보내는 것입니다. 사용자 경험을 개선하고 서버의 부담을 줄이기 위해 검색 흔들림 방지를 구현해야 합니다.

구현 코드는 다음과 같습니다.

const searchTodo = keyword => alovaInstance.Get(`/todo?keyword=${keyword}`);

// Monitor keyword changes through useWatcher, and automatically re-issue the request after the change
const keyword = ref('');
const {
    loading,
    data,
} = useWatcher(() => searchTodo(keyword.value), [keyword], {
    debounce: 500, // set 500ms debounce
});

이러한 방식으로 손떨림 방지 기능이 있는 퍼지 검색 기능이 실현됩니다.

요약하다

이번 호의 시작 가이드는 여기까지입니다. vue+alova의 기본 사용법도 다룹니다. 시도해 볼 수도 있습니다. 질문을 교환할 의견 영역에 오신 것을 환영합니다.