Axios를 통해 인터페이스를 요청하는 것은 매우 간단합니다. Axios 요청을 캡슐화하면 API를 한 곳에서만 메소드로 구성할 수 있으며, 이 메소드를 사용할 때 직접 호출할 수 있습니다. 그러면 너무 많은 어려움을 겪을 필요가 없습니다.
하지만 각 인터페이스를 장황한 Axios 요청 방법으로 정의할 필요는 없습니다. 간단하게 유지하고 싶기 때문에 한 곳에서 간단한 구성을 완료해 보세요.
동일한 모듈의 인터페이스를 하나의 파일에 넣습니다. 예를 들어 src의 서비스 아래에 global.js를 정의하여 여기에 구성된 api를 사용할 수 있습니다. 이 서비스 방법의 구성으로.
예:
name 필드는 나중에 호출할 메소드 이름으로 사용되지만 이는 단순한 객체일 뿐이므로 이제 이를 메소드로 변환하기 위해 메소드를 정의합니다.
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 구성 파일을 메서드가 포함된 개체로 변환하는 것입니다.
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);
를 사용하여 패키지된 개체를 직접 내보냅니다.
vuex에서 API를 호출하려면 먼저 방금 내보낸 개체를 가져옵니다.
import GlobalService from "@/services/global";
액션에서 인터페이스 호출:
const { data } = await GlobalService.userLogin(payload);
그렇습니다. 그 후에는 인터페이스 호출을 완료하는 데 구성과 호출의 두 단계만 필요하며 인터페이스의 의미도 더 명확해집니다.
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; });
관련 권장 사항:
위 내용은 Vue와 Axios의 인터페이스 관리를 통합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!