ja-request

1.0.1 • Public • Published

功能介绍

安装

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

Package Sidebar

Install

npm i ja-request

Weekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

15.6 kB

Total Files

3

Last publish

Collaborators

  • jack-lin