promise-request-all

安装

npm i promise-request-all | yarn add promise-request-all

介绍

• 该项目用来一次性获得多个请求的结果值

• 该项目 基于 promise.all 并且对单个 promise 的 error 进行了错误处理,(返回 error 并设置出错的 http request 的 data 值为 [] )，以防止 promise.all 特性导致的程序出错

• 使用场景，可用于一次性的获取表单 select 下拉 options 的值

• The usage scenario can be used to obtain the value of the select drop-down options of the form at one time

• This project is used to get the result values of multiple requests at once.

说明

1. 该项目基于 promise, 请确保当前环境支持解析 es5 （增加 babel-polyfill 处理）
2. 该项目使用到了 组件级作用域 this
3. 增加了单项请求的 errorFn 处理函数 默认传递 request error 参数
4. 增加了单项请求的 successFn 处理函数 默认传递参数为解析后的 data 与 请求的原始 response
5. 支持 successState / responseData 的深层写法 例如 a a.b a.b.c
6. 该版本配置项 result 可选 （增加）

使用说明

import { promiseRequestAll } from 'promise-request-all'

• 示例

import { getList, getType } from '@/api/*'

'getList' or 'getType' is a http request function return a Promise

• default http Response body structure is as follows

{
    success:true,  // default value true for  responseConfig.successState
    data:[],       // default type  Array     responseConfig.responseData
    ...
    ...            // Other attributes
}

• Component state or data , use this you can inject the results from http response body

  1.Example Vue2

    export default {
        data:{
            return {
                aOptions: [],
                bOptions: [],
                cOptions: [],
            }
        }
    }

 promiseRequestAll.bind(this)([
      { req: getList, params: { a: '' }, result: 'aOptions' },
      { req: getList, params: { b: '' }, result: 'bOptions' ，successFn:function(data,response){ }, errorFn:function(error){ }},
      { req: getType, result: 'cOptions' , responseConfig:{ successState:'state' , responseData:'response' } },     //you can change Key attributes by set responseConfig
      { req: getType, result: 'cOptions' , responseConfig:{ successState:'data.state' , responseData:'data.response' }, errorFn:function(error){ } }    //you can change Key attributes by set responseConfig

])

• 你也可以通过 webpack provide 插件 全局注入该方法

 config.plugin('provide').use(webpack.ProvidePlugin, [{
      promiseRequestAll: [path.join(__dirname, './src/utils/common.js'),'promiseRequestAll'],
}])

• 使用 provide 插件 eslint 需要相关配置,否则会报错

globals:{
    promiseRequestAll:true,
}