pp-axios v1.0.2

接口请求工具

介绍

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

使用场景

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

最新版本

v1.0.2

在项目中引入

npm包形式

// 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
        }
      },
    }
  },
})

初始化参数列表

interceptors

reqInterceptors 与 resInterceptors 参数一致

API

// 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 参数列表

版本记录

npm模块

@ppRequest1.0.1
 - 正式1.0.1版本

拦截器

• 全局拦截器：所有域名都会执行的拦截器函数，与axios 内置的拦截器对应。

• 局部拦截器：只有指定的域名才会执行的拦截器。

• 执行顺序：先执行全局拦截器，再执行局部拦截器

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

原生axios

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

demo

// 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",
});