插件背景

在项目中都需要与后台进行数据交互，最常用的库就是axios。
为了更方便的在项目中的使用，自己动手封装了一个基于现有项目的请求插件。
从简化接口配置、方便调用、减少操作步骤、支持Promise等需求点出发，最后实现这个插件。
欢迎 点赞、收藏、评论、建议
欢迎 点赞、收藏、评论、建议
欢迎 点赞、收藏、评论、建议 （重要的事情说三遍）

注意

此文章更新时插件版本为0.3.7
如有使用问题可私信询问（有空回复）

描述

本来这个插件只适用于vue项目，后面为了可以适配更广的项目需求，故丢弃vue.install绑定
现在可以适用于vue/react等项目，目前只在vue中有使用示例
插件支持TS

插件连接（详细使用教程）

npm
git

demo

接口调用案例源码
接口调用案例在线

安装方式

$ npm install cover-axios --save
$ yarn install cover-axios --save
$ pnpm install cover-axios --save

Example

import HTTP, { genApi } from "cover-axios";

// 添加接口定义
// 添加单条api
const api = genApi("login", "api/user/login", "POST");
http.addApi(api);
// 批量添加api
const apiList = [...]
http.addApiList = apiList

// 可以设置本地请求代理前缀 例如vue3中：
if (import.meta.env.MODE !== 'production') {
    http.setOptions({ baseURL: '/serve' })
}
本地开发时在vite.config.js 中配置代理转发 /serve到指定测试环境

// 设置请求拦截

http.interceptors.request.use(requestIntercept, requestFail)
http.interceptors.response.use(responseIntercept, requestFail)


// 发起请求 返回的是Promise，可以根据自己的喜好使用 then catch / async await
// 如果使用了请求拦截，这边接收的res回事拦截器的返回数据
const res = await http.request("login", { user: "user1", password: 123456 });

请求拦截设置示例

// 请求拦截 同axios
function requestIntercept(config: any) {
    // 通用获取用户token
    config.headers['token'] = token
    return config
}

// 返回拦截 这里根据自己的项目 做了返回处理
// 错误会进行弹窗提示
function responseIntercept(res: any) {
    if (!res) return showMessage(res)
    const { data, code, msg } = res.data
    if (code === 0) {
        return res.data
    }
        return showErrorMessage(msg)
    }
}

// 请求失败处理
function requestFail(err: any) {
    console.error('request fail', err)
    return Promise.reject(err)
}

http.interceptors.request.use(requestIntercept, requestFail)
http.interceptors.response.use(responseIntercept, requestFail)