axios-adapters

Install

npm i axios-adapters -S

or

yarn add axios-adapters

Usage

import axios from 'axios';
import { compose, defaultRequest, RESTful, pagination, preventDefault } from 'axios-adapters';

const http = axios.create({
    baseURL: '/',
    adapter: compose(preventDefault(), RESTful(), pagination(), defaultRequest())
});

API

compose

组装 axios middleware adapter

compose(...adapters: AxiosMiddlewareAdapter[]): AxiosAdapter

Axios middleware adapter

function customMiddleware(options) {
    return async function customMiddlewareAdapter(config, next) {
        // do something before downstream
        // ...
        const response = await next();
        // do something after upstream
        // ...
        return response;
    };
}

defaultRequest

封装了 axios 默认的请求 adapter

发起真实请求的 axios middleware，正常情况下作为 compose 最后一个参数。

axios.create({
    adapter: compose(defaultRequest())
});

RESTful

支持 Express like style 请求

const http = axios.create({
    adapter: compose(RESTful(), defaultRequest())
});

// GET /foo/baz
http.get('/foo/:bar', {
    params: {
        bar: 'baz'
    }
});

// POST /foo/baz
http.post('/foo/:bar', {
    bar: 'baz'
});

pagination

X-Pagination Header

若请求响应中存在 X-Pagination 头部，则解析并保存到 response.pagination 中。

Axios response

| Param | Type | Default Value | Description | | ---------- | ------------ | ------------- | ----------- | | pagination | Pagination | | 分页类实例 |

const http = axios.create({
    adapter: compose(pagination(), defaultRequest())
});

/**
 * ...
 * < HTTP/1.1 200 OK
 * < Content-Type: application/json; charset=utf-8
 * < X-Pagination: {"size":10,"num":1,"total":21}
 * < Content-Length: 15
 * < Date: Wed, 18 Sep 2019 03:53:38 GMT
 * < Connection: keep-alive
 * ...
 **/
http.get('/foo').then(response => {
    // do something with `response.pagination`
    // ...
});

preventDefault

e.preventDefault()

Options

| Param | Type | Default value | Description | | ------- | ----------------------------- | ------------- | ------------ | | onError | (error: AxiosError) => void | | 请求错误处理 |

cont onError = (e) => {
    console.log('error occured:', e);
};
const http = axios.create({
    adapter: compose(preventDefault({ onError }), defaultRequest())
});

http.get('/foo'); // 如果请求出错，则默认会调用 onError

Axios error

| Param | Type | Default value | Description | | -------------- | ------------ | ------------- | ---------------------------------- | | preventDefault | () => void | | 若调用，则不会触发 options onError |

cont onError = (e) => {
    console.log('error occured:', e);
};
const http = axios.create({
    adapter: compose(preventDefault({ onError }), defaultRequest())
});

http.get('/foo').catch(e => {
    e.preventDefault();
    // do something with error
    // ...
});