功能介绍

安装

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