网络请求

@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 | 配置信息 | Object | 必填 | - | | withCredentials | 是否携带cookie | Boolean | 可选 | false | | headers | 全局header | | 可选 | {} | | showToast | 请求返回错误弹窗显示(自行配置) ，回调会返回 String 型错误提示文本 | Function | 可选 | null | | transformRequest | 参数前置格式转换 | Function | 可选 | null | | transformResponse | 回调参数格式转换 | Function | 可选 | null | | afterCallback | 请求回调后方法， 回调返回的res, 后端返回的data | Function | 可选 | null |

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参数）参数：

| 名称 | 说明 | 参数类型 | 可选 | 默认值 | | :-: | :- | :- | :- | -: | | prefix | 接口微服务 | 可选 | String | null | | url | 路径,可以写全http协议地址 | 必填 | String | - | | data | 数据(method为post才有效) | (method:'post')条件必选 | Object | {} | | params | 表单数据(method为get) | 可选 | Object | {} | | method | 请求类型，不限于post,get | 可选 | String | 'get' | | headers | 头部信息，content-type 来区分类型 | 可选 | Object | application/json | | timeout | 超时时长，覆盖全局配置 | 可选 | | 10000 | | signal | 取消标识 | 可选 | | | | errToast | 是否显示错误提示 | 可选 | Boolean | true | | canRepeat | 可以重复请求 | 可选 | Boolean | false | | needJudgeResContent | 是否返回api结构中的data | 可选 | Boolean | true | | withCredentials | 携带cookie(覆盖全局) | 可选 | Boolean | false | | responseType | 返回数据格式 | 可选 | | 'json' | | callback | 回调错误数据处理方法 | 可选 | Function | null |