总结 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 的区别

总结传参方式

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）。