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

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

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

以下是各种请求方式的代码示例,包括 method: 'POST'headersbody 传参:

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、快应用等
请求方法 使用 fetchAxiosXMLHttpRequest 使用 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 :使用 fetchAxiosXMLHttpRequest 发送请求。
  • uni-app :使用 uni.request,适用于跨平台开发。
  • 传参方式 :常用 application/json,适用于 JSON 数据传输。
  • 区别uni-app 是跨平台框架,内置了请求方法 uni.request,而 Vue 需要额外引入库(如 Axios)。
相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue