ljc-axios

light-joint-case 轻量的联合的方案，缩写也是俺的名儿

一个可以方便使用的api封装方案，以后会将想要封装的东西放到这个 “ light-joint-case ” 系列里

• [x] 2022-03-01 可以基础使用: basic

• [x] 2022-03-01 formData 配置转化: parse FormData

• [x] 2022-03-01 取消请求: easy to cancel

• [x] 2022-04-13 添加兼容说明

• [x] 2022-06-30 修复 merge 方法的异常

• [ ] more ...

• ljc-axios

  • Install
  • Usage
    • cancel

• Details

  • createAxios
    • CreateOption
  • createGroup 不推荐 Not recommended
  • getRequest(String:url [, Object: AskConfig])
  • Asker(Object:params|data [, Object: AskConfig])
  • AskConfig
  • For Proxy

Install

# npm 
npm i ljc-axios

# yarn
yarn add ljc-axios

Usage

In your api.js:

import { createAxios } from 'ljc-axios';

const server1 = createAxios({host:'https://my.host/**/data/'});
const server2 = createAxios({
  host:'https://media.host/**/media/',
  timeout: 30000,
  headers: {/*xxxxxxxx*/},
  filterGet: true, // v1.1.0 之后默认开启。去除GET请求的 undefined 和 空字符串
});

// 以下是旧版用法，不推荐
// import { createGroup } from 'ljc-axios';

// // or Proxy url
// const server1 = createGroup('https://my.host/**/data/');
// const server2 = createGroup('https://media.host/**/media/');

export default {
  login: server1.postRequest('user/login'),
  cdnImg: server2.getRequest('image/'),
  // ...
}

In your service scripts:

import apis from 'api.js'

apis.login({ account: 'xxx', password: 'xxx'}).then(() => {
  // ****
})

apis.cdnImg({}, { suffix: `${imgId}` }).then(() => {
  // ****
})

cancel

If you want to cancel a request, you need to watch out:

// work
const req = testApi({ id: 'xxx' }).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});
// but throw error here
setTimeout(req.cancel, 100);

The functions like createGroup('xxx').getRequest will return a Proxy. you can use req.then().catch()... directly, but after that, req will be a Promise without <Function> cancel;

// all work
const req = testApi({ id: 'xxx' });
req.then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});
setTimeout(req.cancel, 100);

Details

createAxios

v1.1.0之后的写法，更贴近Axios @param CreateOption
@returns axios Instance with extends functions

CreateOption

| key | type | description | | --------- | ------- | ---------------------------------------------------- | | host | String | axios self | | timeout | Number | axios self | | headers | Object | axios self | | filterGet | Boolean | skip 'undefined' and '' in GET mothod, default: TRUE |

createGroup 不推荐 Not recommended

@param { String } host
@param { Number } timeout
@param { Object } config
@returns axios Instance with extends functions

getRequest(String:url [, Object: AskConfig])

@returns A proxy of a function called Asker ...more like : putRequest、getRequest、postRequest、deleteRequest

Asker(Object:params|data [, Object: AskConfig])

@returns A proxy of a Promise Send request when it apply

AskConfig

As arg in getRequest or Asker

| key | options | description | | --------- | :------ | :--------------------------------------------------------------------- | | suffix | String | requestUrl = url + suffix | | formData | Boolean | default: false; when it was true, parse data to FormData Object | | filterGet | Boolean | default: true; same as CreateOption, but specifically for this request | | ... | ... | any axios options |

For Proxy

Compatible with traditional browsers, you may need to configure something for proxy. 兼容传统浏览器您可能需要为 Proxy 配置一些东西。

like: <script src="https://unpkg.com/[email protected]/dist/es6-proxy-polyfill.js"></script>