Socket
Book a DemoInstallSign in
Socket

axios-add-loading

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

axios-add-loading

本库通过`axios`的[interceptors](https://github.com/axios/axios#interceptors)帮助你设置ajax请求中的loading

0.0.1
latest
npmnpm
Version published
Weekly downloads
0
-100%
Maintainers
1
Weekly downloads
 
Created
Source

axios-add-loading

本库通过axiosinterceptors帮助你设置ajax请求中的loading

安装

npm i -S axios-add-loading

语法

createAddLoadingInterceptor(
  axios: AxiosInstance,
  options: AxiosAddLoadingOptions
)

参数

  • axios: axios实例
  • options: object类型参考参数说明

如何使用

import createAddLoadingInterceptor from 'axios-add-loading'
import axios from 'axios'
const instance = axios.create()
const options = {
  showLoading: true,
  delEmpty: true,
  openLoading: () => { /* 打开loading方法 */},
  closeLoading: () => { /* 关闭loading方法 */},
  isResOk: res => { /* 对json进行过滤,返回boolean,满足条件的将会返回,参数为AxiosResponse.data */ },
  onResNotOk: res => { /* 只有设置了isResOk才会生效,对不满足isResOk的请求,将会触发onResNotOk的回掉, 参数为 AxiosResponse.data*/ },
  onResError: e => { /* ajax请求错误触发,如404,500等 */}
}
createAddLoadingInterceptor(instance, options)

instance({
  method: 'get',
  url: 'dir/xxx',
  params: { foo: 'bar' },
  // 这里可覆盖showLoading配置
  showLoading: false,
  // 这里可覆盖delEmpty配置
  delEmpty: false,
})

参数说明

delEmpty: boolean

是否删除 get 请求中 params 中为空的字段 xxx/dir?a=&b=3 => xxx/dir?b=3

delEmpty: true

showLoading: boolean

是否显示loading,需结合openLoadingcloseLoading使用

showLoading: true

openLoading: () => void

显示 loading 的方法, 拦截器发起请求前触发

openLoading: () => { /* 打开loading方法 */}

closeLoading: () => void

隐藏 loading 的方法, 拦截器完成请求触发

closeLoading: () => { /* 关闭loading方法 */}

isResOk: res => boolean

大多数情况下response-schema只需要用到data,本方法主要过滤response-schema参数res为其中的data,定义规则确定那些返回内容是符合规则的,如果未设置,拦截器将会返回response-schema

isResOk: res => res.code === 200

onResNotOk: res => void

只有设置了 isResOk 才会生效,对不符合isResOk的请求进行处理

onResNotOk: res => {
  if (res.code === 401) {
    gotoLogin()
  }
}

onResError: e => void

e为handling-errors, 对于请求异常的错误处理

onResError: e => {
  if (e.response.status === 401) {
    gotoLogin()
  }
}

FAQs

Package last updated on 27 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.