谈谈Uniapp开发中常用的数据请求方法

1. 使用uni.request进行数据请求

在Uniapp开发中，最基础而常见的数据请求方法是使用Uni.request方法进行请求，该方法语法如下：

uni.request({
    url: 'http://www.example.com/api/getData',
    method: 'GET',
    data: {
        id: 1,
        name: '张三'
    },
    success: function (res) {
        console.log(res.data);
    }
})

其中，url为请求地址，method为请求方法，data为请求参数，success为请求成功后的回调函数，res.data为返回的数据。在实际应用中，我们常常对请求的url进行封装，如下：

const API_SERVER_URL = 'http://www.example.com/api/';
const request = function (url, data = {}, method = 'GET', header = {}) {
    return new Promise(function (resolve, reject) {
        uni.request({
            url: API_SERVER_URL + url,
            method: method,
            data: data,
            header: header,
            success: function (res) {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else {
                    reject(res);
                }
            },
            fail: function (res) {
                reject(res);
            }
        })
    })
}
export {
    request
}

以上封装方法中，我们将url进行了拼接，将method、data、header等参数进行了默认值处理，使用Promise实现异步请求，并且统一处理了请求成功和失败的结果。

2. 使用async/await进行数据请求

为了更好地处理异步请求，在ES7中提出了async/await方法。Uniapp也支持使用此方法进行数据请求。async/await语法如下：

const API_SERVER_URL = 'http://www.example.com/api/';
const request = async function (url, data = {}, method = 'GET', header = {}) {
    const res = await uni.request({
        url: API_SERVER_URL + url,
        method: method,
        data: data,
        header: header
    })
    if (res.statusCode === 200) {
        return res.data;
    } else {
        return null;
    }
}
export {
    request
}

以上代码将request方法定义为异步函数，并使用await关键字等待uni.request方法的返回结果，并分别处理请求成功和失败的结果。在使用async/await方法时，需要注意将函数定义为async函数，并使用try...catch语句处理错误。

3. 使用axios进行数据请求

除了使用uni.request方法和async/await方法进行数据请求，还可以使用第三方库axios进行数据请求，axios具有以下优势：

支持Promise API

支持浏览器和Node.js环境

支持拦截器，可以对请求和响应进行扩展

具有更好的可读性和可维护性

使用axios进行数据请求的实现代码如下：

import axios from 'axios';
const API_SERVER_URL = 'http://www.example.com/api/';
const request = axios.create({
    baseURL: API_SERVER_URL,
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})
request.interceptors.request.use(function (config) {
    // 在发送请求之前做一些处理
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
request.interceptors.response.use(function (response) {
    // 对响应数据做些什么
    return response.data;
}, function (error) {
    // 对响应错误做些什么
    return Promise.reject(error);
});
export {
    request
}

以上代码首先创建了一个axios实例，并进行了一些默认设置，如设置超时时间、设置请求头等。同时定义了拦截器，在请求和响应中进行了扩展，如在请求之前处理请求数据，在响应之后处理响应数据等。

4. 结束语

以上介绍了在Uniapp开发中常用的数据请求方法，包括使用uni.request方法、使用async/await方法和使用第三方库axios进行数据请求。无论哪种方法，都可以满足我们基本的数据请求需求，同时根据业务需求，我们可以在以上方法的基础上进行扩展和封装，以实现更好的功能和效果。