Axios-rich NPM

安装

npm install axios axios-rich

使用

初始化

import { RichAxios } from 'axios-rich'
//初始化一个实例 该类接收一个config参数，与axios-config几乎一致，其中baseURL必传
const http = new RichAxios({
  baseUrl: 'http://localhost:8080',
  timeout:3000,
})

在初始化实例使用的config中，做了一个扩展拦截器 =>interceptors

interceptors类型是一个{resSuccess，reqSuccess，resFailed，reqFailed}

包含了四个方法，如若使用interceptors，那么这四个方法必须传递且缺一不可，与此同时每个函数都要返回值，

const http = new RichAxios({
  baseUrl: 'http://localhost:8080',
  timeout: 3000,
  interceptors: {
    resSuccess(data) {
      return data
    },
    reqSuccess(data) {
      return data
    },
    resFailed(data) {
      return data
    },
    reqFailed(data) {
      return data
    },
  },
})
//与axios interceptors不同的是，每个函数必须接收一个数据，并将其返回

export{http}

请求以及拦截器

在初始化实例后我们可以将实例抛出以供其他模块使用

import { http } from 'xxx'
//实例的get方法 共接收三个参数 path，config，interceptors  path 是必传的
//interceptors? 还有拦截器？？？ 没错哦~
//config与axios的axios(config)一致，但config中不可有BaseUrl And method 属性 
http.get('/')
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })

interceptors 是当前请求的拦截器，你可以把它当做生命周期来看待

它分别对请求前 > 请求后 > 响应前> 响应后(结束时) 触发传递的函数

当然，这种拦截器并不会像初始化实例一样去强求传递对应的方法，而是可选的

import { http } from './service'

//每个请求时触发的函数都会默认传递一个config参数，你可以选择是否接收它，以便于对请求数据的操作


//每个响应前触发的函数都会默认传递一个data参数。他是成功或失败的数据，你可以比页面更早的得到它，以便于对请求数据的操作！
//注意：该函数必须返回一个布尔值，用来判断此次请求是否继续运行，如果返回false，页面将接收不到数据


//每个响应后/结束时触发的函数，他不会接收任何参数，这是无意义的，所以各取所需吧~
http.get('/', undefined, {
    requested(config?) {
      console.log("请求发出后")
    },
    responsed(config?) {
      console.log("数据响应后/结束时")
    },
    beforeRequest(data?) {
     console.log("请求发出前")
    },
    beforeResponse() {
      console.log("数据响应前")

      return true
    },
  })
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })
//??为什么有个undefined？ 因为js不支持参数名传值，所以config参数类型为config|undefined

全局拦截器

还有拦截器？疯了哇~ 哈哈哈

全局拦截器在每次请求都会触发，全局拦截器需要在实例中设置，依旧可选，各取所需~

http.globalBeforeRequest = (config?) => {
    ...
}
http.globalBeforeResponse = (data?) => {
    ...
  return true
}
http.globalRequested = (config?) => {
    ...
}
http.globalResponsed = () => {
    ...
}

服务器statusCode协议

某些时候我们需要根据服务器返回的statusCoder来进行操作，此时RichAxios提供了方法setStatusModule，希望可以帮助到您~

setStatusModule方法保存在实例上，它接收一个数据类型

//如果我们想在返回的data中插入某些数据，我们可以在obj中添加name值，并在module中返回想要插入的数据

//如果没有添加name值，那么module 返回的任何值都是无效的，这是无意义的~
http.setStatusModule([
  {
    name: 'success',
    status: 200,
    module() {
      return {
        text: '成功啦',
      }
    },
  },
  {
    status: 404,
    module() {
      console.log('404')
    },
  },
    {
    name:'unlicensed'
    status: 403,
    module() {
      console.log('返回来403')
    },
  },
])

//注：插入在data中的数据会以 RA-{$name}的形式存在

自动携带的全局token

我们经常会在请求中携带一个通用的token

为了方便，我们可以选择性使用Rich提供的setGlobalToken方法

该方法接收一个string参数，一旦设置后，后续对于该实例的每一个请求都会携带此token

http.setGlobalToken(
  'kjhiu34hijhi54654iuh67b4iuyb56kjhb543i6u5kjh6b5iuyhb6j5hb65uiyb65ijh6b45uiyh4b5uiyhb',
)



//当我们发起请求时，后端会接收到token
{
  host: 'localhost:8080',
  connection: 'keep-alive',
  'sec-ch-ua': '"Chromium";v="93", " Not;A Brand";v="99"',
  accept: 'application/json, text/plain, */*',
  authorization: 'Bearer kjhiu34hijhi54654iuh67b4iuyb56kjhb543i6u5kjh6b5iuyhb6j5hb65uiyb65ijh6b45uiyh4b5uiyhb',
  'sec-ch-ua-mobile': '?0',
  'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS Community',
  'sec-ch-ua-platform': '"Linux"',
  origin: 'http://localhost:5173',
  'sec-fetch-site': 'same-site',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  referer: 'http://localhost:5173/',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9',
  'if-none-match': 'W/"11-aV1ii2JXmCZ4+0zOp09ehERtM6U"'
}

取消请求

上面我们介绍了 axios原生拦截器以及数据响应前拦截的方法，那请求时怎么拦截呢

我们提供了axios的abort方法，他保存在实例上，如需取消请求，在请求时触发的函数中调用即可！

http.get('/', undefined, {
    responsed() {
      //不要在响应后做任何的拦截操作，这是无意义的，他只是结束时触发的函数
    },
    requested() {
        http.abort() //请求前取消请求
    },
  })
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })

axios rich rich-axios axios-rich

6 months ago

7 months ago

6 months ago

7 months ago

7 months ago