@wattjs/network v0.0.6-beta

网络请求

@wattjs/network

说明

这个是自用的接口请求封装，可在 vue2, vue3, nuxt2, nuxt3 多种项目，多个项目中重复使用，减少项目初始化花费过多重复劳动力，作者初心是用在 h5，ssr，小程序等项目中，使用同一个包，解决请求的问题。

当然如果你觉得不错，也可以直接接入到公司内部使用，作者已经开源了项目，同时这个包是基于wattjs下的sdk。如需了解更多，请关注@wattjs组织下，多个包中会有相互依赖关系，不过最终是作为开发人员工具，服务于公司项目。

• @wattjs/tool
• @wattjs/newtork
• @wattjs/peach
• @wattjs/store
• @wattjs/auth

使用方式

npm i @wattjs/network

项目中使用， 在 src 目录下，新建 api 目录。

创建 index.js 、 user.model.js两个文件，分别为初始化请求类实例，建立请求的 service

// index.js
import { Message } from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

import Fetch from '@wattjs/network'

const Http = new Fetch({
    withCredentials: true,
    showToast (msg) {
        // 错误提示组件
        Message.error({
            background: true,
            closable: true,
            duration: 3,
            content: msg
        })
    },
    config: {
        BASE_URL: 'https://api.jsvue.cn',
        ...
    }
})

model 接口定义层

// user.model.js
import { Model } from '@wattjs/network'
import Http from './index'

const PREFIX = '/api'

// 定义一个接口 
export const getDataPage = Model(Http, {
    perfix: PREFIX, // 可选，不填就直接使用url
    url: '/userList/get',
    method: 'get' // 可选，默认值 ‘get’
})

注意：如果是在 ssr 端调用，请使用 moudule 模式 引用方式为

import Fetch, { Model } from '@wattjs/network/index'

请求的参数，与 axios 参数一致，并额外增加了一些参数，具体请参与下面表格

页面中使用：

<template>
    <button @click="getData"> 请求 </button>
</template>
<script setup>
import { getDataPage } from '@/api/user.model'

const getData = () => {
    getDataPage.send({
        pageIndex: 1,
        pageSize: 10
    })
    .then(() => {})
    .catch(() => {})
}
</script>

参数

Fetch 实例初始化传入参数：

config 参数: | 名称 | 说明 | 参数类型 | 可选 | 默认值 | | :-: | :- | :- | :- | -: | | BASE_URL | 请求base_url | String | 必填 | - | | REQUEST_TIMEOUT | 全局超时时长(毫秒) | int | 可选 | 4000 | | APP_ID | 应用Id(后端给) | String | 可选 | null | | XSRF_HEADER | ticket写入的cookie的name | String | 可选 | null | | RES_CODE | 成功返回码(多个) | Array | 可选 | 0, 200 |

send 请求（同axios参数）参数：