집 > 기사 > 웹 프론트엔드 > Vue와 Axios의 인터페이스 관리를 통합하는 방법

Vue와 Axios의 인터페이스 관리를 통합하는 방법

不言원래의: 2018-07-23 14:59:252340검색

Axios를 통해 인터페이스를 요청하는 것은 매우 간단합니다. Axios 요청을 캡슐화하면 API를 한 곳에서만 메소드로 구성할 수 있으며, 이 메소드를 사용할 때 직접 호출할 수 있습니다. 그러면 너무 많은 어려움을 겪을 필요가 없습니다.

하지만 각 인터페이스를 장황한 Axios 요청 방법으로 정의할 필요는 없습니다. 간단하게 유지하고 싶기 때문에 한 곳에서 간단한 구성을 완료해 보세요.

1. api 인터페이스 구성

동일한 모듈의 인터페이스를 하나의 파일에 넣습니다. 예를 들어 src의 서비스 아래에 global.js를 정의하여 여기에 구성된 api를 사용할 수 있습니다. 이 서비스 방법의 구성으로.

예:

name 필드는 나중에 호출할 메소드 이름으로 사용되지만 이는 단순한 객체일 뿐이므로 이제 이를 메소드로 변환하기 위해 메소드를 정의합니다.

2. 인터페이스 구성의 배열 개체를 메서드로 변환

import axios from "axios";

const withAxios = apiConfig => {
  const serviceMap = {};
  apiConfig.map(({ name, url, method }) => {
    serviceMap[name] = async function(data = {}) {
      let key = "params";      if (method === "post" || method === "put") {
        key = "data";
      }      return axios({
        method,
        url: "/api" + url,
        [key]: data
      });
    };
  });  return serviceMap;
};

export default withAxios;

utils 아래에 Axios를 사용하여 일반 메서드를 정의했습니다. 이 메서드의 기능은 api 구성 파일을 메서드가 포함된 개체로 변환하는 것입니다.

3. API 구성 파일에서 withAxios

import withAxios from "../utils/withAxios";

const apiConfig = [
  {
    name: "userLogin",
    url: "/login",
    method: "get"
  },
  {
    name: "getUserInfo",
    url: "/login/user",
    method: "get"
  },
  {
    name: "getDeptList",
    url: "/login/department",
    method: "get"
  }
];

export default withAxios(apiConfig);

를 사용하여 패키지된 개체를 직접 내보냅니다.

4. vuex에서 사용

vuex에서 API를 호출하려면 먼저 방금 내보낸 개체를 가져옵니다.

import GlobalService from "@/services/global";

액션에서 인터페이스 호출:

const { data } = await GlobalService.userLogin(payload);

그렇습니다. 그 후에는 인터페이스 호출을 완료하는 데 구성과 호출의 두 단계만 필요하며 인터페이스의 의미도 더 명확해집니다.

5. Axios의 기타 구성

Utility의 Axios를 사용하여 Axios에 대한 몇 가지 공통 설정을 지정할 수 있습니다.

예를 들어 인증은 각 요청 헤더에 자동으로 포함됩니다.

axios.defaults.headers.common["Authorization"] = getCookie("jwt") || "";// 注意：此处只会在web应用初始化时配置，在登录成功后需重新配置Authorization。

예를 들어 인터셉터를 사용하여 반환된 개체를 균일하게 처리합니다.

axios.interceptors.response.use(response => {
  const { data } = response;  if (data.status === -2) {
    Vue.prototype.$Message.error(`无效的登录信息或登录已失效，请重新登录`);
    delCookie("jwt");
    router.push({ path: "/login" });
  }  if (data.status === -1) {
    Vue.prototype.$Message.error(`发生错误[${data.message}]`);
  }  return response;
});