npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@v3p/use-axios

v1.0.9

Published

基于vue3和axios的响应式api请求库

Downloads

7

Readme

Vue Axios Composition Util

npm i @v3p/use-axios

pnpm add @v3p/use-axios

yarn add @v3p/use-axios

特性

  1. 默认支持防抖
  2. 每个请求自带终止方法
  3. 响应式错误自动捕获提示,数据自动响应
  4. 拓展流文件下载插件
  5. 内置默认的状态码函数
  6. 增加path参数

使用示例

示例

const { useAxiosRequest, setRequestinterceptors, setResponseinterceptors } =
  createAxios({
    baseURL: "https://any-domain.com",  // 此处参数和axios原本参数保持一致
  }); 

// 请求拦截器,传参与axios保持一致
setRequestinterceptors(
  (config) => {
    const token = sessionStorage.getItem("token");
    if (!token) {
      console.warn("token获取失败...");
    }
    if (config.headers) {
      config.headers.Authorization = `Bearer ${
        token || import.meta.env.VUE_APP_TOKEN
      }`;
    }

    return config;
  }
);

// 响应拦截器 ,传参与axios保持一致,适合做一些不影响数据结构的操作,例如token失效返回登录页面等
setResponseinterceptors((response) => {
  //...
});


const { response, data, error, edata, execute, aborted, abort, finished, loading } = useAxiosRequest({ url: "/something/{name}" },{
  defaultVal: "",
  immediate: false,
  delay: 100,
  isDebounce: false,
});

execute({
  path: {
    name: "yigechengzi"
  }
})

参数解读

useAxiosRequest(UseAxiosRequestConfig, UseExRequestOptions)

| 参数 | 含义 | 默认值 | | ---- | ---- | ---- | | path | 路径参数 |{} |


返回含义如下,所有返回参数值均是可响应的,你可以使用computedwatchwatchEffect等去处理这些参数

| 参数 | 含义 | | ---- | ---- | | response | 原生axios返回对象 | | data | 原生axios返回对象的data属性 | | error | 原生axios返回错误对象 | | edata | 原生axios返回错误对象data属性 | | execute | 执行函数,调用会执行接口调用,传参接收paramsdatapath三个对象 | | aborted | 返回一个boolean,表示链接是否被中断 | | abort | 是一个函数,调用会中断当前链接 | | finished | 表示请求执行完成,请求完成会变为true | | loading | 表示请求是否正在请求,请求完成会变为false |