总结 Vue 请求接口的各种类型及传参方式

在 Vue 中，请求接口的方式主要有以下几种：

1. XMLHttpRequest：原生 JavaScript 方式，功能强大但代码复杂。
2. fetch：现代的 Web API，支持 Promise，语法简洁。
3. Axios ：基于 XMLHttpRequest 的第三方库，功能强大且易用，推荐在 Vue 中使用。

以下是各种请求方式的代码示例，包括 method: 'POST'、headers 和 body 传参：

1. 使用 XMLHttpRequest

XMLHttpRequest 是原生的 JavaScript 方式，功能强大但代码较为复杂。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/api/decode', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('请求成功:', JSON.parse(xhr.responseText));
    }
};
xhr.send(JSON.stringify({ key: 'value' }));

2. 使用 fetch

fetch 是现代的 Web API，支持 Promise，语法简洁

fetch('https://api.example.com/api/decode', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
    console.log('请求成功:', data);
})
.catch(error => {
    console.error('请求失败:', error);
});

3. 使用 Axios

Axios 是一个基于 XMLHttpRequest 的第三方库，功能强大且易用，推荐在 Vue 中使用。

安装 Axios：

npm install axios

使用 Axios 发送请求：

import axios from 'axios';

axios.post('https://api.example.com/api/decode', {
    key: 'value'
}, {
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    console.log('请求成功:', response.data);
})
.catch(error => {
    console.error('请求失败:', error);
});

4. 使用 uni.request

在 uni-app 中，推荐使用 uni.request 发送请求。它是一个跨平台的请求方法，适用于 H5、小程序、App 等。

代码示例：

uni.request({
    url: 'https://api.example.com/api/decode',
    method: 'POST',
    header: {
        'Content-Type': 'application/json'
    },
    data: {
        key: 'value'
    },
    success(res) {
        console.log('请求成功:', res.data);
    },
    fail(err) {
        console.error('请求失败:', err);
    }
});

总结 Vue 和 uni-app 的区别

特性	Vue.js	uni-app
框架类型	前端框架，用于构建 Web 应用	跨平台框架，用于构建 H5、小程序、App
平台支持	仅支持 Web	支持 H5、小程序、App、快应用等
请求方法	使用 fetch、Axios、XMLHttpRequest	使用 uni.request
语法兼容性	遵循 Vue 语法	基于 Vue 语法，但有一些扩展
UI 组件	需要第三方 UI 库（如 Vuetify）	内置 UI 组件库（uni-ui）
打包工具	使用 Webpack	使用 uni-app 自己的编译工具
请求跨平台	仅支持 Web	跨平台封装，内置请求方法

---

总结传参方式

1. Content-Type: application/json：

   • 适用于传递 JSON 数据。
   • 需要将数据转换为 JSON 字符串（JSON.stringify）。
   • 后端需要解析 JSON 数据。

2. Content-Type: application/x-www-form-urlencoded：

   • 适用于传递表单数据。
   • 需要将数据转换为 URL 编码格式（new URLSearchParams）。

3. Content-Type: multipart/form-data：

   • 适用于上传文件或混合数据。
   • 需要使用 FormData 对象。

完整示例代码

Vue + Axios

import axios from 'axios';

axios.post('https://api.example.com/api/decode', {
    key: 'value'
}, {
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    console.log('请求成功:', response.data);
})
.catch(error => {
    console.error('请求失败:', error);
});

uni-app

uni.request({
    url: 'https://api.example.com/api/decode',
    method: 'POST',
    header: {
        'Content-Type': 'application/json'
    },
    data: {
        key: 'value'
    },
    success(res) {
        console.log('请求成功:', res.data);
    },
    fail(err) {
        console.error('请求失败:', err);
    }
});

总结

• Vue ：使用 fetch、Axios 或 XMLHttpRequest 发送请求。
• uni-app ：使用 uni.request，适用于跨平台开发。
• 传参方式 ：常用 application/json，适用于 JSON 数据传输。
• 区别 ：uni-app 是跨平台框架，内置了请求方法 uni.request，而 Vue 需要额外引入库（如 Axios）。