@chaoswise/request

公共请求库

Usage no npm install needed!

<script type="module">
  import chaoswiseRequest from 'https://cdn.skypack.dev/@chaoswise/request';
</script>

README

公共请求库

Features

  • 统一公共请求,作为单独的包运行,相当于axios的再次封装
  • 支持mock数据
  • 多次重复请求,保留最后一次请求
  • 封装cancel方法

Methods

1. initRequest(params)

  • 入口文件初始化axios请求实例的配置
  • 参数params(Object)传递对象参数
{
    // 请求的配置文件
    config:{
      // 请求错误码回调
      statusCallback:{
       401:()=>{},
       403:()=>{},
       ...
      },
      // 是否开启登陆验证 false 关闭 true 开启
      checkLogin:true,
      // 是否启用mock数据 false 关闭 true 开启
      useMock:false
    },
    // 请求头的配置文件
    defaults:{
       // 请求的基础域名
       baseURL:"http://10.0.7.211"
    },
    // mock模拟请求接口数组
    mock:[]
}

2. fetchGet

restfulAPI接口风格之get请求

   // 入参
   {
       url:"/api/v1/get/list", // 接口地址
       options:{} // 请求参数
   }
   // 出参
   Promise对象,
   通过.then(res=>{}).catch(res=>{})获取请求返回值

3. fetchPost

restfulAPI接口风格之get请求

   // 入参
   {
       url:"/api/v1/get/list", // 接口地址
       options:{} // 请求参数
   }
   // 出参
   Promise对象,
   通过.then(res=>{}).catch(res=>{})获取请求返回值

4. fetchDelete

restfulAPI接口风格之delete删除请求

   // 入参
   {
       url:"/api/v1/get/list", // 接口地址
       options:{} // 请求参数
   }
   // 出参
   Promise对象,
   通过.then(res=>{}).catch(res=>{})获取请求返回值

5. fetchPut

restfulAPI接口风格之put更新请求

   // 入参
   {
       url:"/api/v1/get/list", // 接口地址
       options:{} // 请求参数
   }
   // 出参
   Promise对象,
   通过.then(res=>{}).catch(res=>{})获取请求返回值

6. upload

文件上传

   // 入参
   {
       url:"/api/v1/get/list", // 接口地址
       params:{}, // 请求参数
       onUploadProgress:()=>{}, //允许处理上传的进度事件
       options:{} //其他参数
   }
   // 出参
   Promise对象,
   通过.then(res=>{}).catch(res=>{})获取请求返回值

7. downloadFile 下载文件,默认下载excel

   /**
    * 下载动态文件方法
    * @param {*buffer} content 返回的文件内容(二进制流)
    * @param {*string} filename 文件名
    * @param {*string} type 文件类型
    */
   downloadFile(content, filename, type)

工具方法

1. formateResponse(response)

  • 后端接口返回数据格式化,
  • 参数response是请求返回值,
  • 将返回值error_code转code,error_msg转msg,
  • 最终返回{code:10000,status:'success',data:null,msg:'**'}
// 入参
{
    error_code:000000,
    error_msg:"success",
    data:{}
}
// 出参
{
    code:100000,
    msg:"success",
    status:"success",
    data:{}
}

取消请求

import { clearPending,  fetchPost } from '@chaoswise/request';

// 取消全部已发出请求(例如:页面销毁)
clearPending()

// 指定已请求方法取消
const method1 = fetchPost('/get/list')
method1.cancel();

mock方法

1. 约定式

在初始化实例进行配置

// 
initRequest({
  mock: [[
    {
      "method": "onGet",
      "url": "/get/list",
      "res": {
          "code": 100000,
          "data": 141314
      }
    },
    {
      "method": "onGet",
      "url": "/get/auth",
      "res": {
          "status": "success",
          "msg": null,
          "code": 100000,
          "data": [
              {
                  "code": "1011000101",
                  "selected": true
              },
              {
                  "code": "11",
                  "selected": true
              }
          ]
      }
    }
  ]]
})

使用mock实例进行注册(具体参考axios-mock-adapter

import { mockInstance } from '@chaoswise/request';

mockInstance.onGet("/get/allUser").reply(200, {
  data: "get 获取的全部用户 [user1, user2, user3]"
});

mockInstance.onPost("/get/allUser").reply(200, {
  data: "post 获取的全部用户 [user1, user2, user3]"
});

mockInstance.onGet("/get/user", {
  params: {
    id: 'user1'
  }
}).reply(200, {
  data: "get 获取的到的用户为: user1"
});

mockInstance.onPost("/get/user", {
  id: 'user1'
}).reply(200, {
  data: "post 获取的到的用户为: user1"
});