uni.request中写async await

### 如何在 `uni.request` 中正确使用 `async/await`

为了确保 `uni.request` 的异步调用能够被同步处理，可以采用 `async/await` 结合 `Promise` 封装的方式。这种方式不仅可以让代码逻辑更加清晰，还能有效解决页面渲染完成前数据未加载的问题。

#### 方法一：直接在方法内封装

通过创建一个新的 `Promise` 对象来包装原始的 `uni.request` 调用，并利用 `resolve()` 和 `reject()` 来传递结果：

methods: {
    // 定义一个返回 Promise 的函数用于网络请求
    getData() {
        return new Promise((resolve, reject) => {
            uni.request({
                url: 'https://example.com/api/data',
                method: 'GET',
                success: res => {
                    resolve(res.data);
                },
                fail: err => {
                    reject(err);
                }
            });
        });
    },

    async onLoad() {
        try {
            let data = await this.getData();
            console.log('接口数据:', data);
            console.log('此句将在数据获取之后执行');
        } catch (error) {
            console.error('请求失败:', error);
        }
    }
}

这种方法简单明了，适用于小型项目或单个文件内的局部调整[^1]。

#### 方法二：全局 HTTP 请求服务类

对于大型应用来说，建议构建一个独立的服务层来进行统一管理。这可以通过定义一个专门负责发送HTTP请求的服务模块实现，比如命名为 `httpService.js`:

// httpService.js 文件内容
import { request } from '@dcloudio/uni-app';

export default class HttpService {
    static async fetch(url, options={}) {
        try {
            const result = await request(Object.assign({}, options, {url}));
            return result;
        } catch(error){
            throw Error(`Request failed with ${JSON.stringify(error)}`);
        }
    }

    static post(path, body={}, config={}){
        return this.fetch(path, Object.assign(config,{
            method:'POST',
            data:body,
        }));
    }

    static get(path,params={},config={}){
        return this.fetch(`${path}?${this.queryString(params)}`,Object.assign(config,{method:"GET"}));
    }

    static queryString(obj){
        var str=[];
        for(var p in obj)
          if(obj.hasOwnProperty(p)){
              str.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
          }
        return str.join("&");
    }
}

然后可以在其他地方轻松导入并使用这个服务：

import http from './services/httpService'

async function getUserInfo(userId){
    const userInfoResponse = await http.get(`/users/${userId}`);
    return userInfoResponse;
}

这种模式有助于提高代码可维护性和复用率，同时也便于后续扩展功能[^3]。