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 عنوان الموقع الرسمي
جيثب
vue-admin-beautiful - حل على مستوى المؤسسة، وحلول متوسطة وشاملة وخلفية وأمامية (استنادًا إلى أحدث إصدار من vue/cli 4، ودعم أجهزة الكمبيوتر والهواتف المحمولة والأجهزة اللوحية)
vue-admin-beautiful - العرض التوضيحي عبر الإنترنت
uView Documentation - إطار عمل رائع ومتعدد الأطراف للهاتف المحمول مع وثائق مفصلة وسهل الاستخدام
本地访问接口时跨域请求,所以浏览器会先发一个option 去预测能否成功,然后再发一个真正的请求
(راقب رأس الطلب، طريقة الطلب، اطلب Baidu البسيط بنفسك).Object/String/ArrayBuffer
import { http } from '@/utils/luch-request/index.js'
setConfig
؟ ما المعلمات التي يجب تعيينها في اعتراض request
؟setConfig
مناسب لتعيين بعض المعلمات الثابتة/الافتراضية، مثل بعض القيم الافتراضية في الرأس والمعلمات العامة الافتراضية (تكوين الطلب العام). token
غير مناسب للإعداد هنا.interceptors.request
على نطاق أوسع من التطبيقات، لكنني ما زلت أوصي بوضع بعض الأشياء الثابتة في setConfig
. سيتم استدعاء المعترض عند كل طلب، بينما يتم تعديل setConfig
مرة واحدة فقط عند استدعائه. npm
< a href = "https://ext.dcloud.net.cn/plugin?id=392" > luch-request </ a >
370306150
تعليمات تفصيلية بشأن مسائل المكافأة