@deppon/deppon-request

@deppon/deppon-request

前端 http 请求封装包

安装

npm install @deppon/deppon-request

基础使用

JavaScript/TypeScript 项目

import request from '@deppon/deppon-request';

// 发送 GET 请求
request({
    url: '/api/data',
    method: 'get',
    params: {
        id: 1,
    },
})
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.error(err);
    });

// 发送 POST 请求
request({
    url: '/api/data',
    method: 'post',
    data: {
        name: 'test',
    },
})
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.error(err);
    });

Vue 3 使用

1. 安装插件

在 Vue 应用中安装插件：

import { createApp } from 'vue';
import { VuePlugin } from '@deppon/deppon-request';

const app = createApp(App);

// 安装插件
app.use(VuePlugin);

app.mount('#app');

2. 在 Composition API 中使用

<script setup>
import { useRequest } from '@deppon/deppon-request';
import { ref } from 'vue';

const request = useRequest();
const data = ref(null);
const loading = ref(false);

const fetchData = async () => {
    loading.value = true;
    try {
        const res = await request({
            url: '/api/data',
            method: 'get',
            params: {
                id: 1,
            },
        });
        data.value = res;
    } catch (error) {
        console.error(error);
    } finally {
        loading.value = false;
    }
};

const submitData = async () => {
    try {
        const res = await request({
            url: '/api/submit',
            method: 'post',
            data: {
                name: 'test',
            },
        });
        console.log(res);
    } catch (error) {
        console.error(error);
    }
};
</script>

<template>
    <div>
        <button @click="fetchData" :disabled="loading">
            {{ loading ? '加载中...' : '获取数据' }}
        </button>
        <button @click="submitData">提交数据</button>
    </div>
</template>

3. 在 Options API 中使用

<script>
export default {
    data() {
        return {
            loading: false,
            data: null,
        };
    },
    methods: {
        async fetchData() {
            this.loading = true;
            try {
                // 通过 this.$request 访问
                const res = await this.$request({
                    url: '/api/data',
                    method: 'get',
                    params: {
                        id: 1,
                    },
                });
                this.data = res;
            } catch (error) {
                console.error(error);
            } finally {
                this.loading = false;
            }
        },
        async submitData() {
            try {
                const res = await this.$request({
                    url: '/api/submit',
                    method: 'post',
                    data: {
                        name: 'test',
                    },
                });
                console.log(res);
            } catch (error) {
                console.error(error);
            }
        },
    },
};
</script>

API

Composition API

• useRequest() - 获取 request 实例

请求方法

• request(options) - 发送 HTTP 请求

请求参数

• url - 请求的地址（必填）
• method - 请求方法，默认为 'get'
• data - POST 请求的数据
• params - GET 请求的查询参数
• headers - 自定义请求头
• once - 控制接口只执行一次（可选）

使用示例

// GET 请求
request({
    url: '/api/users',
    method: 'get',
    params: {
        page: 1,
        size: 10,
    },
});

// POST 请求
request({
    url: '/api/users',
    method: 'post',
    data: {
        name: 'John',
        age: 30,
    },
});

// 只执行一次的请求
request({
    url: '/api/submit',
    method: 'post',
    data: { name: 'test' },
    once: true,
});

更多 API 请参考源码。

Cookie 跨域处理

本包自动处理 Cookie 跨域设置，确保在跨域请求时能够正确携带 Cookie。

自动设置

1. withCredentials：默认设置为 true，允许跨域请求携带 Cookie

2. document.domain：自动调用 @deppon/deppon-utils 的 setCookieDomain() 方法设置：

   • 如果 URL 包含 deppontest.com，自动设置 document.domain = 'deppontest.com'
   • 如果 URL 包含 deppon.com，自动设置 document.domain = 'deppon.com'

   注意：setCookieDomain 方法已从 @deppon/deppon-utils 导入，你也可以手动调用：

   import { setCookieDomain } from '@deppon/deppon-utils';
   setCookieDomain();
   

使用场景

• 在 UAP 环境中，需要跨域请求时携带 Cookie（如登录凭证）
• 在子域名之间共享 Cookie
• 在 iframe 环境中进行跨域请求

注意事项

1. document.domain 只能在当前域或其父域上设置
   • 例如：如果当前域是 a.deppon.com，可以设置为 deppon.com，但不能设置为其他域
2. 设置 document.domain 后，端口号会被忽略
3. 如果设置失败（例如跨域限制），会静默失败，不影响其他功能
4. withCredentials 需要服务端配合设置 Access-Control-Allow-Credentials: true 响应头

示例

import request from '@deppon/deppon-request';

// 跨域请求会自动携带 Cookie
request({
    url: 'https://api.deppon.com/user/info',
    method: 'get',
    // withCredentials: true 已自动设置
});