1. uniapp中的网络请求
在uniapp应用中，网络请求是非常常见的操作。在进行网络请求之前，我们需要明确一些概念。
接口：接口就是一个能够被程序调用的通信点，用于完成特定功能的一组方法。在网络请求中，接口就是服务器上的一个可供调用的方法集合。
请求：请求是指客户端向服务器发起的一个操作。在网络请求中，请求一般指通过HTTP协议向服务器发送请求信息。
响应：响应是服务器对请求的回应，包含了服务器返回的数据信息。在uniapp中，我们通过异步网络请求向服务器发送请求，并接收服务器的响应，以便进行后续的处理。
2. uniapp中的网络请求方法
uniapp提供了多种网络请求的方法，包括uni.request()、uni.downloadFile()、uni.uploadFile()等。其中，uni.request()是最为常用的网络请求方法。
2.1 uni.request()方法
uni.request()方法可以发送HTTP请求，并且获取服务器的响应。该方法可以接收的参数如下：
url：String类型，必选参数，表示请求的接口地址。
method：String类型，可选参数，默认为'GET'，表示请求的方式。常用的请求方式有'GET'和'POST'。
data：Object/String类型，可选参数，表示请求的数据。如果请求方式为'GET'，则将数据拼接在URL后面；如果请求方式为'POST'，则将数据放在请求体中。
header：Object类型，可选参数，表示请求头部信息。
dataType：String类型，可选参数，默认为'json'，表示期望的返回数据类型。常用的数据类型有'json'和'text'。
success：Function类型，可选参数，表示请求成功后的回调函数。
fail：Function类型，可选参数，表示请求失败后的回调函数。
complete：Function类型，可选参数，表示请求结束后的回调函数。
下面是一个使用uni.request()方法发送GET请求的示例：
uni.request({
url: 'https://api.example.com/somepath',
method: 'GET',
success: function(res) {
console.log(res.data);
},
fail: function(err) {
console.log('请求失败：' + JSON.stringify(err));
}
})
2.2 封装uni.request()方法
由于uni.request()方法的调用需要传递多个参数，因此在实际开发中，我们往往会将其进行封装，以方便调用。
下面是一个封装uni.request()方法的示例：
function http(url, data, method, success, fail, complete) {
uni.request({
url: url,
data: data,
method: method,
success: function(res) {
success && success(res);
},
fail: function(err) {
fail && fail(err);
},
complete: function() {
complete && complete();
}
});
}
export default http;
在上述代码中，http()函数封装了uni.request()方法，将其转化为更加简单易用的函数。使用该函数时，只需要传递必要的参数即可。
3. uniapp中的网络请求结果的处理
在进行网络请求时，我们需要对服务器返回的结果进行处理，以便正确地展示数据或者进行后续操作。
3.1 响应状态码
当服务器响应请求时，会返回一个响应状态码，用于表示响应的状态。常见的响应状态码如下：
200：表示请求成功。
400：表示请求参数错误。
401：表示未授权。
403：表示禁止访问。
404：表示请求的资源不存在。
500：表示服务器内部错误。
在对服务器返回的结果进行处理时，我们需要判断响应状态码。如果状态码为200，则表示响应成功；否则，表示响应失败。在请求失败时，我们需要根据不同的状态码进行相应的处理，例如重新请求、提示用户等。
3.2 响应内容
在服务器返回的响应中，除了响应状态码之外，还包含了服务器返回的数据信息。在uniapp中，服务器通常会以JSON格式返回数据。
因此，在得到服务器的响应之后，我们需要将返回的JSON格式数据进行解析，并对解析出来的数据进行处理。例如，将数据展示在页面上、存储到本地等。
4. uniapp中的网络请求实战
下面将通过一个具体的例子来演示如何在uniapp中进行网络请求。
4.1 实现功能
接下来我们将开发一个简单的天气应用。用户在应用上输入城市名称，应用将向服务器发送请求，获取该城市的天气信息，并将其展示在页面上。
4.2 实现步骤
实现该应用的具体步骤如下：
1.准备工作：在应用开发前，我们需要选择一家天气开放接口供应商，并申请使用该接口。这里以心知天气API为例，使用其免费版API。
2.发送GET请求：获取心知天气API对应城市的天气信息。
3.解析JSON数据：将服务器返回的JSON格式数据进行解析，以获取天气信息。
4.展示天气信息：将获取到的天气信息展示在页面上。
4.3 代码示例
下面是实现该应用的完整代码：
// pages/index/index.vue
<template>
<view class="container">
<view class="input-box">
<input placeholder="请输入城市名称" @input="onInput" />
<button @tap="onSearch">搜索</button>
</view>
<view class="result-box" v-if="showResult">
<view class="result">
<view class="info">
<view class="city">{{city}}</view>
<view class="temp">{{temp}}°C</view>
<view class="weather">{{weather}}</view>
</view>
<view class="icon">
<image :src="iconUrl" />
</view>
</view>
</view>
</view>
</template>
<script>
import http from '../../utils/http.js';
export default {
data() {
return {
city: '', // 城市
temp: '', // 温度
weather: '', // 天气状况
iconCode: '', // 天气图标代码
iconUrl: '', // 天气图标URL
showResult: false // 是否显示查询结果
};
},
methods: {
onInput(e) {
this.city = e.target.value;
},
onSearch() {
let that = this;
let url = 'https://api.seniverse.com/v3/weather/now.json';
let data = {
key: 'free key',
location: that.city,
language: 'zh-Hans',
unit: 'c'
};
http(url, data, 'GET',
function(res) {
if (res.statusCode === 200) {
let result = res.data.results[0].now;
that.temp = result.temperature;
that.weather = result.text;
that.iconCode = result.code;
that.iconUrl = 'https://cdn.sencdn.com/web/icons/' + that.iconCode + '.png';
that.showResult = true;
} else {
uni.showModal({
content: '请求失败，请检查您的网络设置',
showCancel: false
});
}
},
function(err) {
uni.showModal({
content: '请求失败，请检查您的网络设置',
showCancel: false
});
},
function() {
console.log('complete');
}
);
}
}
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input-box {
display: flex;
width: 100%;
justify-content: center;
margin-bottom: 30px;
}
input {
width: 60%;
height: 30px;
margin-right: 10px;
border: none;
border-radius: 4px;
padding: 0 10px;
font-size: 14px;
color: #333;
}
button {
width: 80px;
height: 30px;
border: none;
border-radius: 4px;
background-color: #409eff;
color: #fff;
font-size: 14px;
}
.result-box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.result {
width: 70%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.city {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.temp {
font-size: 60px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.weather {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
image {
width: 80px;
height: 80px;
}
</style>
上述代码中，http()函数为我们之前封装的网络请求函数。在onSearch()方法中，我们先根据用户输入的城市名称，构造请求URL和数据。然后，调用http()方法向服务器发送GET请求，并在请求成功后，将获取到的数据展示在页面上。
5. 总结
在uniapp应用的开发中，网络请求是非常常见的操作。我们可以通过uniapp提供的uni.request()等方法来发送HTTP请求，并对服务器返回的数据进行处理，以实现各种功能和需求。
在使用网络请求时，我们需要注意请求的方式和数据，以及服务器返回的响应状态码和数据格式。同时，我们也可以将网络请求封装为更加简单易用的函数，以方便使用和维护。