vue apis 다운로드 - vue apis 소스 코드 다운로드

vue apis

기타 카테고리

1.0.0

다운로드

vue-apis

axios와 통합된 vue 플러그인입니다. 체인 프로그래밍을 사용하여 API를 구축하고 요청 인스턴스를 Promise로 반환합니다. API 구축 방법과 참조 방법이 간단해졌습니다.
axios와 통합된 vue 플러그인입니다. 체인 프로그래밍을 사용하여 API를 구축하고 Promise로 요청 인스턴스를 반환합니다. API 구축 방법과 참조 방법(this.$apis.apiName을 통해 참조)을 크게 단순화합니다.

브라우저 지원


최신 ✔	최신 ✔	최신 ✔	최신 ✔	최신 ✔	11 ✔

설치 중

npm install vue-apis
// or
yarn add vue-apis

용법

수입

import Vue from 'vue'
import VueApis from 'vue-apis'

Vue.use(VueApis, options)

API

기능	예	논쟁	설명
setUrl	setUrl('https://baidu.com')	(URL: 문자열)	요청 URL 주소 설정
데이터 세트	setData({ a: 1})	(데이터: 개체)	게시물 본문 개체 설정
setParams	setParams({ t: Date.now() })	(매개변수: 객체)	요청 URL 쿼리 설정
헤더 설정	setHeaders({ 'content-type': 'application/json' })	(헤더: 개체)	요청 헤더 설정
setTimeout	setTimeout(10000)	(시간 초과:번호)	요청 시간 초과 설정
사용자 정의 옵션 설정	setCustomOptions({ responseType: 'stream' })	(옵션: 객체, 지우기: 부울)	맞춤 옵션 설정

옵션

옵션 키	유형	기본값	설명
아피스	물체	{}	API 세트
표시로드 중	기능	한정되지 않은	로딩 레이아웃 기능 표시
숨기기로드 중	기능	한정되지 않은	로딩 레이아웃 기능 숨기기
인터셉터	InterceptorObject	한정되지 않은	요청이나 응답이 처리되기 전에 가로채거나 잡을 수 있습니다.

InterceptorObject

필드	유형	설명
요구	요청객체/함수	인스턴스가 'Function'인 경우 인터셉터에 대한 'then' 콜백입니다.
응답	응답객체/함수	인스턴스가 'Function'인 경우 인터셉터에 대한 'then' 콜백입니다.

요청객체

기능	예를 들어
그 다음에	(구성) => { 구성 반환 }
잡다	(오류) => { return Promise.reject(error) }

응답객체

기능	예를 들어
그 다음에	(응답) => { 응답 반환 }
잡다	(오류) => { return Promise.reject(error) }

예

main.js

 'vue'에서 Vue 가져오기 'vue-apis'에서 VueApi 가져오기 './api'에서 Api 가져오기 Vue.use(VueApis, {
api: API,
showLoading: () => {console.log('showLoading')
},
hideLoading: () => {console.log('hideLoading')
},
인터셉터: {request: { then(config) {// 요청이 전송되기 전에 작업을 수행합니다. }, catch(error) {// 요청에 대해 작업을 수행합니다. errorreturn Promise.reject(error) }}, response: { then( response) {// 응답 datareturn으로 작업 수행 response }, catch(error) {// 응답 errorreturn으로 작업 수행 Promise.reject(error);
}})

api.js

 import { ApiOptions, ApiMethod } from 'vue-apis' const $api = {
readme() {return new ApiOptions().setUrl(`https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md`).setMethod(ApiMethod.GET).setParams( { 타임스탬프: Date.now()}).setHeaders({ 승인: `Bearer ${Date.now()}`}).request()
}}기본 $api 내보내기

집.vue

 <템플릿>
<div v-html="readme"></div></template><스크립트>
기본 내보내기 {데이터 () { 반환 {readme: '' }}, 비동기 생성됨 () { const res = wait this.$apis.readme() this.readme = res}
}</script>

양식데이터

API

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

FormData 인스턴스 생성

 const formData = new window.FormData()formData.append(key, value)// Requestthis.$apis.formDataRequest(formData)

맞춤 옵션

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // 잘못된 데이터: {} , // 유효하지 않은 매개변수: {}, // 유효하지 않은 헤더: {}, // 유효하지 않은 메소드: {}, // 유효하지 않은 responseType: 'stream' // 유효}, /* 모두 지우기 처음에는 사용자 정의 옵션 */ false).request()
}}