个人技术博客——uni.request的使用总结

2024-12-20 21:58:23 385 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

uniapp 网络请求封装(uni.request 与 uView-Plus）备注：在发送uni.request请求之前，可以执行拦截操作；在uni.request的success中接收响应后处理响应数据。在开发项目中，需要经常与后端服务器进行交互；为了提高开发效率和代码维护性，以及降低重复性代码，便对网络请求进行封装统一管理。api.js文件是用来调用uview-plus封装好的请求，统一管理请求接口，在后续开发中只需要调用api.js文件即可。api.js文件是用来调用封装好的uni.request，统一管理请求接口，在后续开发中只需要调用api.js文件即可。阅读详情

这个作业属于哪个课程	FZU_SE_teacherW_4
这个作业要求在哪里	软件工程实践总结&个人技术博客-CSDN社区
这个作业的目标	课程实践总结、分析软件开发模式
其他参考文献	uni.request(OBJECT) uni-app官网、网络 / 发起请求 / wx.request

技术用途：uni.request用于实现小程序与后端服务器之间的数据交互，支持GET、POST等多种请求方式。
学习原因：实现微信小程序的数据获取与提交，确保前后端的数据传输与交互。
技术难点：处理请求的跨平台兼容性、请求失败的错误捕获和网络请求的优化问题。

二、技术详述

2.1基本请求实现

GET请求示例：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  // success和fail回调分别处理请求成功和失败的情况
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

POST请求示例：

uni.request({
  url: 'https://api.example.com/submit',
  method: 'POST',
  data: { name: 'John', age: 30 },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

2.2网络请求封装

为了提高代码复用性，通常会对请求进行封装（通常项目会使用token进行登录验证，以下考虑了token验证）

const BASE_URL = 'https://api.example.com';

/*
* 全局请求封装
* @param path 请求路径
* @param method 请求类型(GET/POST/DELETE等)
* @oaram data 请求体数据
* @param loading 请求未完成是是否显示加载中，默认为true
*/
export default (path, method, data = {}, loading = true) => {
    // 从localStorage中获取存储token
    const token = uni.getStorageSync("token");

    if (loading) {
        uni.showLoading({  //这里需主动调用 uni.hideLoading 才能关闭提示框
            title: "加载中",
            mask: true
        });
    };
    //根据有无token调用函数
    if (token != '') {
        return tokenRequest(path, method, data, loading, token)
    } else {
        return noTokenRequest(path, method, data, loading)
    }
};

// 有token时发送请求函数
function tokenRequest(path, method, data, loading, token) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASEURL + path,
            method: method,
            data,
            header: {
                "token":  token
            },
            success(response) {
                //这里可以做响应拦截（以返回401表示未登录为例）
                if (response.data.code === 401) {
                    logout();
                }
                console.log(response.data);
                resolve(response.data);
            },
            fail(err) {
                uni.showToast({
                    icon: "none",
                    title: '服务响应失败'
                });
                console.error(err);
                reject(err);
            },
            complete() {
                uni.hideLoading();
            }
        });
    });
}

// 无token时发送请求函数
function noTokenRequest(path, method, data, loading) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASEURL + path,
            method: method,
            data,
            success(response) {
                //这里同样可以做响应拦截
                console.log(response.data)
                resolve(response.data);
            },
            fail(err) {
                uni.showToast({
                    title: '服务响应失败'
                });
                console.error(err);
                reject(err);
            },
            complete() {
                uni.hideLoading();
            }
        });
    });
}

调用

import request from '@/utils/request.js';

// 获取用户信息 
export const getBaseInfo = () => {
    return request(`/user/info`, 'GET')
}

// 登录
export const login = (user) => {
    return request(`/user/login`, 'POST', user)
}

三、技术使用过程中遇到的问题和解决过程

跨域请求问题
小程序开发中可能遇到跨域请求限制，导致请求失败。解决方法是通过后端设置CORS，允许特定来源访问，或者使用uniCloud代理功能来绕过跨域问题。

请求失败和错误处理
网络请求有时会因网络不稳定而失败，需要通过fail回调对不同类型的错误进行处理：

fail: (err) => {
  if (err.statusCode === 500) {
    uni.showToast({ title: '服务器错误，请稍后再试', icon: 'none' });
  } else {
    uni.showToast({ title: '网络错误，请检查网络连接', icon: 'none' });
  }
}

性能优化
请求频繁时可能影响小程序性能，可以通过分页加载、请求合并等方式减少请求次数，提升用户体验。

分页请求示例：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: { page: currentPage, size: pageSize },
  success: (res) => {
    console.log(res.data);
  }
});