vue apis ดาวน์โหลด - ดาวน์โหลด vue apis ซอร์สโค้ด

vue apis

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

วิว-apis

ปลั๊กอิน vue ที่ผสานรวมเข้ากับ axios สร้าง API โดยใช้การเขียนโปรแกรมแบบลูกโซ่และส่งคืนอินสแตนซ์คำขอเป็นสัญญา ลดความซับซ้อนที่ดีของวิธีสร้าง API และวิธีอ้างอิง
ปลั๊กอิน vue ที่รวมเข้ากับ axios ใช้การเขียนโปรแกรมแบบลูกโซ่เพื่อสร้าง 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)

เอปี้

การทำงาน	ตัวอย่าง	การโต้แย้ง	คำอธิบาย
setUrl	setUrl('https://baidu.com')	(URL: สตริง)	ตั้งค่าที่อยู่ URL คำขอ
ชุดข้อมูล	setData({ ก: 1})	(ข้อมูล: วัตถุ)	ตั้งค่าวัตถุโพสต์เนื้อหา
ตั้งค่าพารามิเตอร์	setParams({ t: Date.now() })	(พารามิเตอร์: วัตถุ)	ตั้งค่าแบบสอบถาม URL คำขอ
setHeaders	setHeaders({ 'ประเภทเนื้อหา': 'application/json' })	(ส่วนหัว: วัตถุ)	ตั้งค่าส่วนหัวคำขอ
ตั้งค่าหมดเวลา	ตั้งค่าหมดเวลา (10,000)	(หมดเวลา:หมายเลข)	ตั้งค่าการหมดเวลาคำขอ
ตั้งค่าตัวเลือกแบบกำหนดเอง	setCustomOptions ({ responseType: 'สตรีม' })	(ตัวเลือก: วัตถุ, ล้าง: บูลีน)	ตั้งค่าตัวเลือกที่กำหนดเอง

ตัวเลือก

ปุ่มตัวเลือก	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
API	วัตถุ	-	ชุดเอพีไอ
กำลังแสดงกำลังโหลด	การทำงาน	ไม่ได้กำหนด	แสดงฟังก์ชันเค้าโครงการโหลด
กำลังซ่อนกำลังโหลด	การทำงาน	ไม่ได้กำหนด	ซ่อนฟังก์ชันเค้าโครงการโหลด
เครื่องสกัดกั้น	InterceptorObject	ไม่ได้กำหนด	คุณสามารถสกัดกั้นคำขอหรือคำตอบก่อนที่จะได้รับการจัดการภายในเวลานั้นหรือจับได้

InterceptorObject

สนาม	พิมพ์	คำอธิบาย
ขอ	ขอวัตถุ/ฟังก์ชัน	เมื่ออินสแตนซ์เป็น 'ฟังก์ชัน' จะเป็นการโทรกลับไปยังตัวสกัดกั้น 'จากนั้น'
การตอบสนอง	การตอบสนองวัตถุ/ฟังก์ชัน	เมื่ออินสแตนซ์เป็น 'ฟังก์ชัน' จะเป็นการโทรกลับไปยังตัวสกัดกั้น 'จากนั้น'

คำขอObject

การทำงาน	เช่น
แล้ว	(config) => { คืนค่าการกำหนดค่า; }
จับ	(ข้อผิดพลาด) => { return Promise.reject (ข้อผิดพลาด) }

การตอบสนองObject

การทำงาน	เช่น
แล้ว	(ตอบกลับ) => { ตอบกลับ;
จับ	(ข้อผิดพลาด) => { return Promise.reject (ข้อผิดพลาด) }

ตัวอย่าง

main.js

 นำเข้า Vue จาก 'vue' นำเข้า VueApis จาก 'vue-apis' นำเข้า Api จาก './api'Vue.use (VueApis, {
API: API,
showLoading: () => {console.log('showLoading')
-
HideLoading: () => {console.log('hideLoading')
-
interceptors: {request: { then(config) {// Do something before request is sendreturn config; }, catch(error) {// ทำบางอย่างกับคำขอ errorreturn Promise.reject(error }}, ตอบกลับ: { then( การตอบสนอง) {// ทำอะไรกับการตอบสนอง datareturn การตอบสนอง }, catch (ข้อผิดพลาด) {// ทำอะไรบางอย่างกับการตอบสนอง errorreturn Promise.reject (ข้อผิดพลาด }}
-

api.js

 นำเข้า { ApiOptions, ApiMethod } จาก 'vue-apis' const $api = {
readme () { ส่งคืน ApiOptions ใหม่ ().setUrl (`https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md`).setMethod(ApiMethod.GET).setParams( { การประทับเวลา: Date.now()}).setHeaders({ การอนุญาต: `Bearer ${Date.now()}`}).คำขอ()
}} ส่งออกค่าเริ่มต้น $api

home.vue

 <แม่แบบ>
<div v-html="readme"></div></template><script>
ส่งออกเริ่มต้น {data () { return {readme: '' }} สร้าง async () { const res = รอสิ่งนี้.$apis.readme() this.readme = res}
</script>

FormData

เอปี้

 const $api = {
formDataRequest (formData) { ส่งคืน 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) { ส่งคืน ApiOptions ใหม่().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // ข้อมูลไม่ถูกต้อง: {} , // พารามิเตอร์ไม่ถูกต้อง: {}, // ส่วนหัวไม่ถูกต้อง: {}, // วิธีการไม่ถูกต้อง: {}, // ไม่ถูกต้อง responseType: 'สตรีม' // ถูกต้อง}, /* ล้างทั้งหมด ตัวเลือกที่กำหนดเองในตอนแรก */ false).request()
-