当前位置：首页 > news >正文

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

news 2025/1/8 14:31:45

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

XMLHttpRequest：原生 JavaScript 方式，功能强大但代码复杂。
fetch：现代的 Web API，支持 Promise，语法简洁。
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	跨平台封装，内置请求方法

总结传参方式

Content-Type: application/json：
- 适用于传递 JSON 数据。
- 需要将数据转换为 JSON 字符串（JSON.stringify）。
- 后端需要解析 JSON 数据。
Content-Type: application/x-www-form-urlencoded：
- 适用于传递表单数据。
- 需要将数据转换为 URL 编码格式（new URLSearchParams）。
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);}
});