ja-request

功能介绍

安装

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)
     })