luch request
3.1.1
npm install luch - request - S
อ่านการเริ่มต้นอย่างรวดเร็วก่อนที่จะใช้ npm
หลังจากติดตั้งการขึ้นต่อกันบน github npm run build
และใช้โฟลเดอร์ DCloud/luch-request
ตลาดปลั๊กอิน DCloud
สร้างอินสแตนซ์
import Request from '@/utils/luch-request/index.js' // 下载的插件
// import Request from 'luch-request' // 使用npm
const http = new Request ( ) ;
ดำเนินการคำขอ GET
http . get ( '/user/login' , { params : { userName : 'name' , password : '123456' } } ) . then ( res => {
} ) . catch ( err => {
} )
// 局部修改配置,局部配置优先级高于全局配置
http . get ( '/user/login' , {
params : { userName : 'name' , password : '123456' } , /* 会加在url上 */
header : { } , /* 会与全局header合并,如有同名属性,局部覆盖全局 */
dataType : 'json' ,
// 注:如果局部custom与全局custom有同名属性,则后面的属性会覆盖前面的属性,相当于Object.assign(全局,局部)
custom : { auth : true } , // 可以加一些自定义参数,在拦截器等地方使用。比如这里我加了一个auth,可在拦截器里拿到,如果true就传token
// #ifndef MP-ALIPAY
responseType : 'text' ,
// #endif
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
timeout : 60000 , // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序(2.10.0)、支付宝小程序
// #endif
// #ifdef APP-PLUS
sslVerify : true , // 验证 ssl 证书 仅5+App安卓端支持(HBuilderX 2.3.3+)
// #endif
// #ifdef H5
withCredentials : false , // 跨域请求时是否携带凭证(cookies)仅H5支持(HBuilderX 2.6.15+)
// #endif
// 返回当前请求的task, options。请勿在此处修改options。非必填
getTask : ( task , options ) => {
// setTimeout(() => {
// task.abort()
// }, 500)
} ,
// 自定义验证器。statusCode必存在。非必填
validateStatus : function validateStatus ( statusCode ) {
return statusCode >= 200 && statusCode < 300
} ,
// forcedJSONParsing: true, // 是否尝试将响应数据json化,默认为true。如果失败则返回原数据
} ) . then ( res => {
} ) . catch ( err => {
} )
ดำเนินการร้องขอ POST
http . post ( '/user/login' , { userName : 'name' , password : '123456' } ) . then ( res => {
} ) . catch ( err => {
} )
// 局部修改配置,局部配置优先级高于全局配置
http . post ( '/user/login' , { userName : 'name' , password : '123456' } , {
params : { } , /* 会加在url上 */
header : { } , /* 会与全局header合并,如有同名属性,局部覆盖全局 */
dataType : 'json' ,
// 注:如果局部custom与全局custom有同名属性,则后面的属性会覆盖前面的属性,相当于Object.assign(全局,局部)
custom : { auth : true } , // 可以加一些自定义参数,在拦截器等地方使用。比如这里我加了一个auth,可在拦截器里拿到,如果true就传token
// #ifndef MP-ALIPAY
responseType : 'text' ,
// #endif
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
timeout : 60000 , // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序(2.10.0)、支付宝小程序
// #endif
// #ifdef APP-PLUS
sslVerify : true , // 验证 ssl 证书 仅5+App安卓端支持(HBuilderX 2.3.3+)
// #endif
// #ifdef H5
withCredentials : false , // 跨域请求时是否携带凭证(cookies)仅H5支持(HBuilderX 2.6.15+)
// #endif
// 返回当前请求的task, options。请勿在此处修改options。非必填
getTask : ( task , options ) => {
// setTimeout(() => {
// task.abort()
// }, 500)
} ,
// 自定义验证器。statusCode必存在。非必填
validateStatus : function validateStatus ( statusCode ) {
return statusCode >= 200 && statusCode < 300
}
} ) . then ( res => {
} ) . catch ( err => {
} )
ดำเนินการคำขอ upload
http . upload ( 'api/upload/img' , {
params : { } , /* 会加在url上 */
// #ifdef APP-PLUS || H5
files : [ ] , // 需要上传的文件列表。使用 files 时,filePath 和 name 不生效。App、H5( 2.6.15+)
// #endif
// #ifdef MP-ALIPAY
fileType : 'image/video/audio' , // 仅支付宝小程序,且必填。
// #endif
filePath : '' , // 要上传文件资源的路径。
// 注:如果局部custom与全局custom有同名属性,则后面的属性会覆盖前面的属性,相当于Object.assign(全局,局部)
custom : { auth : true } , // 可以加一些自定义参数,在拦截器等地方使用。比如这里我加了一个auth,可在拦截器里拿到,如果true就传token
name : 'file' , // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
// #ifdef H5 || APP-PLUS
timeout : 60000 , // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
// #endif
header : { } , /* 会与全局header合并,如有同名属性,局部覆盖全局 */
formData : { } , // HTTP 请求中其他额外的 form data
// 返回当前请求的task, options。请勿在此处修改options。非必填
getTask : ( task , options ) => {
// task.onProgressUpdate((res) => {
// console.log('上传进度' + res.progress);
// console.log('已经上传的数据长度' + res.totalBytesSent);
// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
//
// // 测试条件,取消上传任务。
// if (res.progress > 50) {
// uploadTask.abort();
// }
// });
} ,
// 是否尝试将响应数据json化。boolean 或者一个包含include的对象。非必填。默认true。include为数组,包含需要json化的method
// forcedJSONParsing: {include: ['UPLOAD', 'DOWNLOAD']}
} ) . then ( res => {
// 返回的res.data 已经进行JSON.parse
} ) . catch ( err => {
} )
ที่อยู่เว็บไซต์อย่างเป็นทางการของ luch-request
GitHub
vue-admin-beautiful - ระดับองค์กร โซลูชันระดับกลางระดับกลาง แบ็คเอนด์และฟรอนต์เอนด์สากล (อิงตามเวอร์ชันล่าสุดของ vue/cli 4 รองรับคอมพิวเตอร์ โทรศัพท์มือถือ และแท็บเล็ต)
vue-admin-beautiful - การสาธิตออนไลน์
เอกสาร uView - เฟรมเวิร์ก cross-end บนมือถือที่ยอดเยี่ยมพร้อมเอกสารประกอบโดยละเอียดและใช้งานง่าย
本地访问接口时跨域请求,所以浏览器会先发一个option 去预测能否成功,然后再发一个真正的请求
(สังเกตส่วนหัวคำขอ, วิธีการขอ, คำของ่ายๆ ของ Baidu ด้วยตัวเอง)Object/String/ArrayBuffer
import { http } from '@/utils/luch-request/index.js'
setConfig
จำเป็นต้องตั้งค่าพารามิเตอร์ใดในตัวดัก request
setConfig
เหมาะสำหรับการตั้งค่าพารามิเตอร์คงที่/ค่าเริ่มต้น เช่น ค่าเริ่มต้นบางส่วนในส่วนหัวและพารามิเตอร์สากลเริ่มต้น (การกำหนดค่าคำขอทั่วโลก) token
ไม่เหมาะสำหรับการตั้งค่าที่นี่interceptors.request
interceptor มีแอปพลิเคชันที่หลากหลายมากขึ้น แต่ฉันยังคงแนะนำให้วางบางสิ่งแบบคงที่ใน setConfig
Interceptor จะถูกเรียกใช้ในทุกคำขอ ในขณะที่ setConfig
จะถูกแก้ไขเพียงครั้งเดียวเมื่อมีการเรียกใช้ npm
< a href = "https://ext.dcloud.net.cn/plugin?id=392" > luch-request </ a >
370306150
คำแนะนำโดยละเอียดเกี่ยวกับเรื่องรางวัล