功能介绍
安装
npm install ja-request --save
引入
import requestUtils from 'ja-request';
快速使用
import requestUtils from 'ja-request';// 引入ja-request
let request = requestUtils.create({//创建一个request实例
baseUrl: 'http://localhost:8080/', // 请求基础链接
})
request.post('test',{})//发送请求
.then(res=>{
console.log('请求成功',res)
})
.catch(err=>{
console.log('请求失败',err)
})
配置说明
参数 | 类型 | 默认 | 必传 | 描述 |
---|---|---|---|---|
baseUrl | String | 请求基础链接 | ||
timeout | Number | 10000 | 请求超时时间 ms | |
interBefore | Function | 请求拦截,接收&&返回config | ||
interAfter | Function | 响应拦截,处理.then取到的数据 | ||
successState | Function | 根据接口返回值判断是否请求成功,return一个布尔值 | ||
loaddingShow | Boolean | false | 是否显示loadding,不需要loadding以下无需配置 | |
loaddingTime | Number | 200 | 只在200ms以上的请求显示loadding | |
loadingShowFunc | Function | 显示loadding的方法,建议全局方法 | ||
loadingHideFunc | Function | 隐藏loadding的方法 | ||
loadingFailFunc | Function | 请求失败的方法 |
##小程序建议配置
import requestUtils from 'ja-request';// 引入ja-request
let request = requestUtils.create({
baseUrl: 'http://localhost:8080/', // 请求基础链接
timeout: 10000,// 请求超时时间
header:{ // 请求头
'content-type': 'application/json;charset=UTF-8;',
},
successState: res => {// 根据接口返回值判断是否请求成功
return res.data.code == 10000;
},
interBefore: config => {//请求拦截
return config;
},
interAfter: res => {//响应拦截 .then取到的数据
return res.data;
},
loaddingTime: 200,// 只在200ms以上的请求显示loadding
loaddingShow: true,// 是否显示loadding
loadingShowFunc: () => { wx.showLoading({ title: '加载中..', }) },
loadingHideFunc: () => { wx.hideLoading()},
loadingFailFunc: res => {//请求失败提示
wx.showToast({
title: res.msg || res.message || '网络错误!',
icon: 'none',
duration: 2000})
},
})
##axios,element-ui 配置
import requestUtils from 'ja-request';// 引入ja-request
import axios from 'axios';
let request = requestUtils.create({
baseUrl: 'http://localhost:8080/', // 请求基础链接
timeout: 2000,// 请求超时时间
header:{ // 请求头
'content-type': 'application/json;charset=UTF-8;',
},
successState: res => {// 根据接口返回值判断是否请求成功
return res.data && res.data.code == 10000;//根据接口情况修改
},
interBefore: config => {//请求拦截
return config;
},
interAfter: res => {//响应拦截 .then取到的数据
return res.data;
},
loaddingTime: 200,// 只在200ms以上的请求显示loadding
loaddingShow: true,//是否显示loadding
loadingShowFunc: () => { return ElementUi.Loading.service({}); },
loadingHideFunc: (obj) => {obj.close();},
loadingFailFunc: (res) => {//请求失败提示
ElementUi.Message({
showClose: true,
message: res.msg || res.message || '网络错误!',
type: 'error'
});
}
},axios);
##请求
参数 | 类型 | 默认 | 必传 | 描述 |
---|---|---|---|---|
api | String | true | 请求链接 | |
parame | Object | 请求参数 | ||
loaddingShow | Boolean | 是否显示loadding |
request.post('test/index', {a:1}, false)
.then(res=>{
console.log('请求成功',res)
})
.catch(err=>{
console.log('请求失败',err)
})
##all
备注:使用方法同Promise.all,传入数组,返回也是数组
备注:所有请求成功才会进.then
参数 | 类型 | 默认 | 必传 | 描述 |
---|---|---|---|---|
apis | Array | true | 请求的promise数组 | |
#####回调解析 | ||||
方法 | 数据类型 | 回调条件 | ||
------- | ------ | ------- | ||
then | Array | 所有请求成功 | ||
catch | Object | 其中一个请求失败 | ||
finally | Array / Object | 所有请求成功才会返回接口数据 |
let getData1 = post('test/index', {a:1}, false);
let getData2 = post('test/index', {a:2}, false);
request.all([getData1, getData2]])
.finally(res=>{
console.log('请求完成',res)
})
.then(request.spread(function(res,res2){
console.log('请求成功', res, res2)
}))
.catch(err=>{
console.log('请求失败',err)
})
##race
备注:使用方法同Promise.race,传入数组,返回也是数组
备注:有一个请求成功就进.then
参数 | 类型 | 必传 | 描述 |
---|---|---|---|
apis | Array | true | 请求的promise数组 |
#####回调解析 | |||
方法 | 数据类型 | 回调条件 | |
------- | ------ | ------- | |
then | Array | 其中一个请求成功 | |
catch | Object | 其中一个请求失败 | |
finally | Array / Object | 其中一个请求完成 |
let getData1 = post('test/index', {a:1}, false);
let getData2 = post('test/index', {a:2}, false);
request.race([getData1, getData2]])
.finally(res=>{
console.log('请求完成',res)
})
.then(err=>{
console.log('请求成功',err)
})
.catch(err=>{
console.log('请求失败',err)
})