wepy plugin axios

wepy-plugin-axios

ก่อนอื่นเลย ขอขอบคุณผู้เขียน axios และ wepy ที่ได้มอบห้องสมุดที่ยอดเยี่ยมเช่นนี้!

นี่คือปลั๊กอิน wepy ที่ให้คุณใช้ axios ในโปรแกรมขนาดเล็กได้

เอกสาร axios | .wepy เอกสาร

เมื่อสร้างมินิโปรแกรม ฟังก์ชันของฟังก์ชัน wx.request ที่สร้างไว้ในมินิโปรแกรมนั้นถูกจำกัดอย่างมาก แม้แต่ wepy.request ก็เป็นเพียงการห่อหุ้มฟังก์ชันดั้งเดิมอย่างง่าย ๆ และไม่สามารถให้ฟังก์ชันขั้นสูงเช่น axios ได้ ดังนั้นฉันจึงสร้างปลั๊กอินนี้ขึ้นมา in อนุญาตให้ใช้ฟังก์ชันส่วนใหญ่ของ axios ในโปรแกรมขนาดเล็กได้

ในขณะที่รักษา API ให้ใกล้เคียงกับ API ดั้งเดิมของ axios มากที่สุด ปลั๊กอินนี้จะสรุป wx.request , wx.uploadFile และ wx.downloadFile นอกจากนี้ ยังมีฟังก์ชันคิวคำขอ ซึ่งเพิ่มขีดจำกัดในการส่งคำขอสูงสุด 5 รายการ ในเวลาเดียวกัน

หากคุณชอบให้ดาวและสนับสนุนมันหรือไม่?

ติดตั้ง

ใช้ npm หรือเส้นด้ายเพื่อติดตั้ง axios และ wepy-plugin-axios ในเวลาเดียวกัน

 npm ติดตั้ง axios wepy-plugin-axios --save
เส้นด้ายเพิ่ม axios wepy-plugin-axios

การกำหนดค่า

หมายเหตุ: ต้องใช้ปลั๊กอินนี้กับ wepy ตัวอย่างต่อไปนี้ใช้ wepy เวอร์ชันล่าสุด หากคุณไม่ทราบวิธีใช้ wepy หรือ axios โปรดอ่านเอกสารที่เกี่ยวข้องก่อน

1. กำหนดค่า wepy

   เพิ่มรายการ axios ลงใน plugins ของ wepy.config.js ปลั๊กอินไม่มีตัวเลือก เพียงใช้วัตถุว่างเป็นตัวเลือก

    โมดูล.ส่งออก = {
   // ...ปลั๊กอินการกำหนดค่าอื่น ๆ: {// ... axios ปลั๊กอินอื่น ๆ: {}
   -

   หมายเหตุ: หากคุณใช้การกำหนดค่าเริ่มต้นที่สร้างโดย wepy จะมีโค้ดต่อไปนี้ที่ส่วนท้ายของไฟล์:

    module.exports.plugin = {
   uglifyjs: {// ...
   -
   อิมเมจมิน: ​​{// ...
   -

   ที่นี่คุณต้องแทรกบรรทัด axios: {} มิฉะนั้นจะเกิดข้อผิดพลาดเมื่อสร้างเวอร์ชันรีลีส

2. กำหนดค่า axios

   แนะนำฟังก์ชันสำหรับการสร้างอะแดปเตอร์จาก wepy-plugin-axios/dist/adapter จากนั้นส่งอินสแตนซ์ของ axios ไปยังฟังก์ชันนี้เพื่อรับอะแดปเตอร์

   ใช้ axios.defaults หรือ axios.create เพื่อตั้งค่าคุณสมบัติ adapter ของ axios (แนะนำให้ใช้อย่างหลัง)

    นำเข้า axios จาก 'axios'import wepyAxiosAdapter จาก 'wepy-plugin-axios/dist/adapter'// การกำหนดค่าเริ่มต้นของอะแดปเตอร์จะต้องดำเนินการก่อน axios.create const adapter อื่นใด = wepyAxiosAdapter(axios) ส่งออก axios.create เริ่มต้น ({
   อะแดปเตอร์: อะแดปเตอร์ // คุณสมบัตินี้เป็นกุญแจสำคัญในการใช้ axios ในมินิโปรแกรม // ...คุณสมบัติอื่น ๆ})

การใช้งาน

ตัวอย่างต่อไปนี้ถือว่าการกำหนดค่าเสร็จสมบูรณ์ตามเนื้อหาข้างต้น

ส่งคำขอตามปกติ

 //ส่งคำขอ GET ปกติ axios.get('https://huajingkun.com/api/userinfo')//ส่งข้อมูล json axios.request({
วิธีการ: 'โพสต์'
URL: 'https://huajingkun.com/api/userinfo',
ข้อมูล: {ชื่อเล่น: '233'
}})//ส่งข้อมูล urlencoded axios.post('https://huajingkun.com/api/userinfo', { ชื่อเล่น: '233' }, {
ส่วนหัว: {'content-type': 'application/x-www-form-urlencoded'
-

อัพโหลดไฟล์

หากฟิลด์ $upload ปรากฏในข้อมูลของคำขอ POST คำขอนี้จะถือเป็นคำขออัปโหลดไฟล์

 axios.post('https://huajingkun.com/api/avatar', {
$upload: {ชื่อ: 'avatar',filePath: 'wxfile://sometempfilepath' // ผลลัพธ์จากอินเทอร์เฟซเช่น wx.chooseImage },
// ...ข้อมูลอื่นๆ ส่งมารวมกัน})

ดาวน์โหลดไฟล์

หาก responseType เป็น file ในคำขอ GET คำขอนี้จะถือเป็นคำขอดาวน์โหลดไฟล์ พาธชั่วคราวของไฟล์ จะถูกส่งกลับ (ดูเอกสารประกอบการพัฒนามินิโปรแกรมสำหรับรายละเอียด)

หมายเหตุ: โปรโตคอล http สามารถใช้ได้ในขณะนี้เท่านั้น

 axios.get('http://www.baidu.com', { responseType: 'file' }).แล้ว(ตอบกลับ => {
console.log(response.data) // ส่งออกเส้นทางชั่วคราวของไฟล์ที่ดาวน์โหลดสำเร็จ})

ขอตัวเลือก

ปลั๊กอินนี้ให้การสนับสนุนตัวเลือก axios ส่วนใหญ่ และยังทำการแก้ไขบางอย่างตาม axios API ดั้งเดิม:

ตัวเลือกที่ไม่รองรับ

หมายเหตุ: เนื่องจากฟังก์ชันคำขอที่จำกัดของมินิโปรแกรม ตัวเลือกต่อไปนี้จึงไม่ได้รับการสนับสนุน หากตัวเลือกต่อไปนี้ปรากฏขึ้นระหว่างการใช้งาน ตัวเลือกเหล่านั้นจะถูกละเว้น

• timeout

• withCredentials

• auth

• xsrfCookieName

• xsrfHeaderName

• onUploadProgress

• onDownloadProgress

• maxContentLength

• maxRedirects

• httpAgent

• httpsAgent

• proxy

ตัวเลือกที่จำกัด

• url : ต้องระบุโปรโตคอล และต้องเป็น http หรือ https เท่านั้น การดาวน์โหลดไฟล์เท่านั้นที่สามารถใช้ได้

• method : สามารถเป็นวิธีการที่มินิโปรแกรมรองรับเท่านั้น (ดูรายละเอียดในเอกสารประกอบการพัฒนามินิโปรแกรม)

• responseType : สามารถเป็นได้เพียง json , text และ file เท่านั้น

กลับเนื้อหา

เนื้อหาที่ส่งคืนจะคล้ายกับเนื้อหาที่ส่งคืนของ axios:

 -
// ข้อมูลตอบกลับที่ส่งกลับโดยเซิร์ฟเวอร์ // สำหรับคำขอดาวน์โหลดไฟล์ เนื้อหาของฟิลด์ข้อมูลคือเส้นทางชั่วคราวของข้อมูลไฟล์: object | string | any,

// สถานะรหัสตอบกลับ HTTP: หมายเลข,

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

// ตัวเลือกคำขอที่ใช้โดย axios config: object,

// ส่งผ่านเนื้อหาเฉพาะของคำขอ wx.request หรือ wx.uploadFile หรือ wx.downloadFile: object}

สังเกต

เนื่องจากระบบปลั๊กอินปัจจุบันของ wepy ยังไม่สมบูรณ์เพียงพอ ปลั๊กอินนี้จึงใช้วิธีการที่ค่อนข้าง "สกปรก" เพื่ออนุญาตให้ใช้ axios ใน wepy:

แก้ไขไฟล์ต้นฉบับ axios โดยตรง

คำจำกัดความของอะแดปเตอร์ในไฟล์ต้นฉบับ axios lib/defaults.js ถูกลบใน lib/plugin.js เนื่องจาก axios รองรับทั้งเบราว์เซอร์และ Node.js ดังนั้น wepy จึงไม่สามารถละเลยโมดูลดั้งเดิมของ Node.js ได้ ทำให้บรรจุภัณฑ์ล้มเหลว

อย่างไรก็ตาม ขณะนี้ปลั๊กอิน wepy สามารถแก้ไขไฟล์ต้นฉบับในขั้นตอนสุดท้ายของการบรรจุเท่านั้น และไม่สามารถแก้ไขข้อมูลการพึ่งพาได้ ดังนั้นโค้ดที่เตรียมไว้สำหรับ Node.js จึงไม่สามารถละเลยได้ ดังนั้นจึงทำได้เพียงลบอย่างหยาบคายเท่านั้น รหัสที่เสียหายโดยเบราว์เซอร์ ฉันก็ลบมันออกไปเช่นกัน เนื่องจาก XMLHttpRequest ไม่สามารถใช้ในมินิโปรแกรมได้ และต้องใช้อะแดปเตอร์แบบกำหนดเองอย่างสมบูรณ์ หลังจากลบ ขนาดไฟล์ก็สามารถลดลงได้เช่นกัน

การแก้ไขนี้หมายความว่าหากโค้ดแอปเพล็ตของคุณแชร์โฟลเดอร์ node_modules กับโค้ดอื่น โค้ดอื่นจะไม่สามารถใช้ axios ได้ตามปกติ

การพัฒนาและการทดสอบปลั๊กอิน

เนื่องจากปัจจุบัน wepy ไม่มีฟังก์ชัน alias คุณจึงสามารถคัดลอกโฟลเดอร์โปรเจ็กต์ทั้งหมดไปยังโฟลเดอร์ node_modules ของโปรเจ็กต์ทดสอบในระหว่างการพัฒนา และเปลี่ยน wepy-plugin-axios/dist/adapter เป็น wepy-plugin-axios/lib/adapter.js

รันคำสั่งต่อไปนี้ระหว่างการคอมไพล์เพื่อรับไฟล์สุดท้ายในโฟลเดอร์ dist :

 บิลด์การรัน NPM

ใบอนุญาต

เอ็มไอที