简述UniApp中如何发送HTTP请求？

八股文_UniApp面试题 0 133

参考回答：

在 UniApp 中，发送 HTTP 请求通常使用 uni.request 方法。uni.request 是 UniApp 提供的一个跨平台的 API，用于发送网络请求，支持 GET、POST、PUT、DELETE 等 HTTP 请求方式，并且可以在各个平台上进行兼容。

1. 使用 `uni.request` 发送 HTTP 请求：

uni.request 用于发送网络请求，接受一个配置对象，其中包含请求的 URL、请求方式、请求参数、回调函数等。

示例： 发送 GET 请求：

“`javascript
uni.request({
url: 'https://api.example.com/data', // 请求的 URL
method: 'GET', // 请求方式
success: (res) => {
console.log('请求成功:', res.data); // 成功回调
},
fail: (err) => {
console.error('请求失败:', err); // 失败回调
},
complete: () => {
console.log('请求完成'); // 不管成功还是失败都会执行
}
});
“`

示例： 发送 POST 请求：

“`javascript
uni.request({
url: 'https://api.example.com/data', // 请求的 URL
method: 'POST', // 请求方式
data: { name: 'John', age: 30 }, // 请求数据
success: (res) => {
console.log('请求成功:', res.data); // 成功回调
},
fail: (err) => {
console.error('请求失败:', err); // 失败回调
}
});
“`

2. 请求的常用配置项：

url：请求的 URL。
method：请求方式，如 GET、POST、PUT、DELETE 等。
data：请求发送的数据，通常在 POST 请求中使用。
header：请求头，常用于携带认证信息、设置内容类型等。
timeout：设置请求的超时时间。
success：请求成功的回调函数。
fail：请求失败的回调函数。
complete：请求完成后的回调函数（不论请求成功或失败）。

3. 示例：POST 请求发送 JSON 数据：

“`javascript
uni.request({
url: 'https://api.example.com/submit', // 请求的 URL
method: 'POST', // 请求方式
header: {
'Content-Type': 'application/json' // 设置请求头为 JSON 格式
},
data: {
username: 'JohnDoe',
password: '123456'
},
success: (res) => {
console.log('提交成功:', res.data);
},
fail: (err) => {
console.error('提交失败:', err);
}
});
“`

详细讲解与拓展：

uni.request 方法：
- uni.request 是一个基于 Promise 的异步方法，它返回一个 XMLHttpRequest 对象，支持多种 HTTP 请求方式，能够在多种平台（如 iOS、Android、Web 和小程序）上使用。
- uni.request 的默认超时是 60 秒，如果请求时间超过该时间，将触发超时错误。可以通过设置 timeout 参数来调整请求的超时时间。
跨域问题：
- 在 Web 环境下，跨域请求可能会受到浏览器的限制。如果你在使用 uni.request 时遇到跨域问题，可以尝试使用代理或配置 CORS（跨源资源共享）策略。小程序和其他平台通常不会遇到这种问题。
请求头：
- 请求头可以通过 header 参数来设置。在处理请求时，通常需要设置请求头，如 Content-Type 来指定请求体的数据格式（application/json 或 application/x-www-form-urlencoded 等），特别是在发送 JSON 数据时需要设置 Content-Type 为 application/json。
请求的异步处理：
- uni.request 是异步请求，会返回一个 Promise 对象，支持 .then() 和 .catch() 方法用于处理请求结果。如果你需要处理多个请求，可以使用 Promise.all() 来确保多个请求并发执行。
示例： 使用 async/await 语法发送请求：
```
async function fetchData() {
 try {
   const res = await uni.request({
     url: 'https://api.example.com/data',
     method: 'GET'
   });
   console.log('请求结果:', res[1].data);
 } catch (err) {
   console.error('请求失败:', err);
 }
}

fetchData();
```

举个例子：

假设你正在开发一个天气查询应用，通过城市名称获取天气数据。你可以通过 uni.request 向天气 API 发起请求，并显示返回的数据。

uni.request({
  url: 'https://api.weatherapi.com/v1/current.json',
  method: 'GET',
  data: {
    key: 'your_api_key',
    q: 'Beijing'
  },
  success: (res) => {
    console.log('Weather Data:', res.data);
    this.weather = res.data.current;
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

总结：UniApp 中通过 uni.request 发送 HTTP 请求，可以轻松实现与后端的数据交互。uni.request 支持多种请求方式、请求头设置、超时配置等，适用于多平台开发。通过异步操作和回调函数，可以灵活地处理网络请求的结果。

参考回答：

1. 使用 uni.request 发送 HTTP 请求：

2. 请求的常用配置项：

3. 示例：POST 请求发送 JSON 数据：

详细讲解与拓展：

举个例子：

发表评论 取消回复

1. 使用 `uni.request` 发送 HTTP 请求：

发表评论取消回复