# pp-axios

**Repository Path**: ppxiao/pp-axios

## Basic Information

- **Project Name**: pp-axios
- **Description**: axios二次封装，支持esModule、connonJs引入
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-19
- **Last Updated**: 2022-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 接口请求工具

## 介绍

基于axios封装，提供拦截器配置、暴露原生axios等功能

## 使用场景

一般在h5、pc等web开发场景下，涉及http接口请求、多域名接口请求时使用，通过集中传入配置，统一进行业务请求的管理。

## 最新版本

v1.0.2

## 在项目中引入

#### npm包形式


```js
// ESModule 规范
import Request from 'pp-axios';

// commonJs 规范
const Request = require('pp-axios').default;

// axios初始化：
axiosEnhance = new Request({
  domain: {
    xxxx: "https://xxxx",
  },
  interceptors: {
    xxxx: {
      reqInterceptors: {
        success: (config) => {
          return config
        },
        error: (err) => {
          return err
        }
      },
      resInterceptors: {
        success: (config) => {
          return config
        },
        error: (err) => {
          return err
        }
      },
      needGlobalInterceptors: true
    },
    glob: {
      reqInterceptors: {
        success: (config) => {
          return config
        },
        error: (err) => {
          return err
        }
      },

      resInterceptors: {
        success: (config) => {
          return config
        },
        error: (err) => {
          return err
        }
      },
    }
  },
})

```
#### 初始化参数列表

| 参数         | 类型    | 是否必填   | 说明                                   | 默认值                     |
| :----------- | :------ | :--------- | :------------------------------------- | :------------------------- |
| domain       | object  | 是 | 所有域名集合 | 无 |
| interceptors | object  | 否 | 全局拦截器与单个域名拦截器 | 无 |
| paramsFilter | boolean | 否 | 发送请求时过滤null、空字符串、undefined | true |

#### interceptors

| 参数 | 类型   | 是否必填       | 说明                                              | 默认值                     |
| :--- | :----- | :------------- | :------------------------------------------------ | :------------------------- |
| xxxx | object | 否 | 单个域名拦截器，参数名与domain 对象里的属性对应。 | 无 |
| glob | object | 否 | 全局拦截器配置 | 全局拦截器与单个域名拦截器 | 无 |

#### reqInterceptors 与 resInterceptors 参数一致

| 参数 | 类型     | 是否必填 | 说明           | 默认值 |
| :--- | :------- | :------- | :------------- | :----- |
| success | function | 否       | 拦截器成功回调 | 无     |
| error  | function | 否       | 拦截器失败回调 | 无     |

## API

| 参数 | 类型     |
| :--- | :------- |
| requests | function |
| options  | function |
| get  | function |
| delete  | function |
| head  | function |
| post  | function |
| put  | function |
| patch  | function |
| axios  | function |

```js

// requests 方法对axios的request方法进行封装
// 创建一个请求函数，参数继承axios的请求配置，并且追加了business 与 resType。
// 这里只列举 axios 几个常用的字段，更多字段请查阅axios 文档 http://www.axios-js.com/zh-cn/docs/#axios-request-config
// method 默认为get
axiosEnhance.request({
  business: "xxxx",
  resType: 0,
  url: "/xxx",
});

// get、post 等等方法对axios原来的方法进行封装，options追加了business 字段，可以自动对应damain里的baseurl,拦截器等配置
// 如果不在options里 传business，则会使用axios默认的实例，并且其他配置需要自己配置
// 使用方法与参数与axios原生提供一致 http://www.axios-js.com/zh-cn/docs/#axios-get-url-config-1
axiosEnhance.get(url: "/xxx", {
  business: "xxxx",
  params: {}
});

```


#### requests 参数列表

| 参数     | 类型     | 是否必填 | 说明                                                                                                    | 默认值 |
| :------- | :------- | :------- | :------------------------------------------------------------------------------------------------------ | :----- |
| business | Function | 否       | 请求域名key，与domain 中属性名对应                                                                      | 无     |
| resType  | number   | 否       | 0:返回服务器响应以及https状态码等等 1:返回服务器响应 2:返回服务器响应中的data字段，没有的话返回所有字段 | 1      |
| resSuccessCode  | number   | 否 | 服务端请求成功的code，只有resType为 2 时需要 | 200 |


## 版本记录

npm模块
```js
@ppRequest1.0.1
 - 正式1.0.1版本
```


## 拦截器

- 全局拦截器：所有域名都会执行的拦截器函数，与axios 内置的拦截器对应。
- 局部拦截器：只有指定的域名才会执行的拦截器。
  
- 执行顺序：先执行全局拦截器，再执行局部拦截器

- 如果某个域名不需要执行全局拦截器，只需要执行 needGlobalInterceptors 参数为false 即可，便不会执行
- 
## 原生axios

```js
const axios = Request.axios //可使用原生axios提供的all 等等方法
axios.all()
```

## demo

```js

// axios初始化：
const axiosEnhance = new Request({
  domain: {
    testDomain: "https://xxx.cn",
  },
  interceptors: {
    testDomain: {
      reqInterceptors: {
        success: (config) => {
          //单域名拦截器header设置，由于headers 与全局拦截器共享，所以配置需要自行合并，否则会覆盖全局拦截器设置的header
          config.headers = { ...config.headers } 
          return config
        },
      },
    },
    //全域名拦截器
    glob: {
      reqInterceptors: {
        success: (config) => {
          config.headers = { ...config.headers } 
          return config
        },
      },
    }
  },
})

axiosEnhance.request({
  business: "testDomain",
  url: "/v1/countries",
});

// get 
axiosEnhance.get("https://xxx.cn/v1/countries");

axiosEnhance.get("/v1/countries", {
  business: "testDomain",
});

//post
axiosEnhance.post("https://xxx.cn/v1/countries", {
  data: 'data',
});

axiosEnhance.post("v1/countries", {
  data: 'data',
}, {
  business: "testDomain",
});

```