uni-app 封装api请求

水深无声 2023-10-15 18:16 22阅读 0赞

#### 目录 ####

*   *   *  1，封装API请求步骤
         *  2，uni-app封装api请求改进

#### 1，封装API请求步骤 ####

在uni-app中封装API请求可以按照以下步骤进行：

1.  创建一个utils文件夹，并在其中创建一个api.js文件，用于存放API请求相关的代码。
2.  在api.js文件中，引入uni.request方法用于发送请求。示例代码如下：

export function request(url, method, data) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: url,
          method: method,
          data: data,
          success: (res) => {
            resolve(res.data);
          },
          fail: (err) => {
            reject(err);
          }
        });
      });
    }

这里使用了Promise对象来处理异步请求，方便后续的使用和处理。

1.  在api.js文件中，定义具体的API请求函数。示例代码如下：

import { request } from './utils/api';
    
    export function login(username, password) {
      const url = 'https://api.example.com/login';
      const method = 'POST';
      const data = {
        username: username,
        password: password
      };
      return request(url, method, data);
    }
    
    export function getUserInfo(userId) {
      const url = `https://api.example.com/users/${userId}`;
      const method = 'GET';
      return request(url, method);
    }

以上示例代码中包括了登录和获取用户信息两个API请求函数。根据具体的需求，你可以进行修改或添加其他的API请求函数。

1.  在需要使用API的页面或组件中引入并调用定义的API请求函数即可。示例代码如下：

import { login, getUserInfo } from './utils/api';
    
    login('example', 'password').then((res) => {
      console.log('登录成功', res);
    }).catch((err) => {
      console.error('登录失败', err);
    });
    
    getUserInfo(123).then((res) => {
      console.log('获取用户信息成功', res);
    }).catch((err) => {
      console.error('获取用户信息失败', err);
    });

以上示例代码展示了如何使用封装的API请求函数来进行登录和获取用户信息的操作。根据具体需求，你可以在相应的页面或组件中调用相关API请求函数。

通过以上步骤，你就可以在uni-app中封装API请求，使代码结构更加清晰和可维护。记得根据实际情况进行适当的错误处理和数据处理。

#### 2，uni-app封装api请求改进 ####

// @/utils/request.js
    // #ifdef MP-WEIXIN
    const baseURL = "https://www.bradenhan.tech"
    // #endif 
    // #ifdef H5
    const baseURL = ""
    // #endif
    
    const timeout = 5000
    
    // 封装api请求
    const request = function(option){ 
        // 获取用户传入的url
        var url = baseURL + option.url; 
         
        // 添加提请求头
        var  header = option.header||{}
        if(!!option.needToken){
            // 添加token 
            header.Authorization =  'Bearer ' +  uni.getStorageSync('token');  
        }
        header.source=1;
        header.channel="h5";
        
        // 加载提示
        var loading = option.loading;
        // 如果有loading就显示loading
        if(loading){
            uni.showLoading(loading)
        }
      
      // 返回一个promise
        return new Promise((resolve,reject)=>{  
            // 发起一个request请求
            uni.request({
                url, //请求url
                method:option.method||"GET", //请求方法
                header, //请求头
                timeout,
                data:option.data||option.params, //请求数据
                success(res){
                    // 成功返回结果
                    if(res.statusCode===200){
                        resolve(res.data)
                        // 如果是101 没有权限
                        if(res.data.code==101){
                            uni.showToast({
                                title: res.data.msg,
                                icon:'none'
                            })
                            uni.redirectTo({
                                url: '/pages/login/index',
                            })
                        }
                        if(res.data.code!=200&&res.data.code!=0){
                            uni.showToast({
                                icon:'none',
                                title:res.data.msg||'请求错误'
                            })
                        }
                    } 
                },
                fail(err){
                    // 失败返回失败结果
                    uni.showToast({
                        title: '请求失败',
                        icon:'error'
                    })
                    console.error(err);
                    reject(err)
                },
                complete(){
                    // 完成 关闭loading
                    if(loading){
                        uni.hideLoading()
                    }
                }
            })
        })
    }
    
    // 定义get简洁方法
    request.get=function(url,config){
        return  request({
            url,
            method:"GET",
            ...config
        })
    }
    
    // 定义post简洁方法
    request.post=function(url,data,config){
        return  request({
            url,
            method:"POST",  
            ...config,
            data
        })
    }
    // 导出请求
    export default request;

统一控制api.js

request.post(url,data,needToken)

参数：

• url 请求url

• data 请求参数data

• needToken 是否需要参数

// @/api/index.js
    
    import request from '@/utils/request.js' 
    
    // 用户注册
    export function customUseRegister(data){
        return request.post("/xxxx1",data)
    }
    
    // 微信用户登录
    export function customUserLogin(data){
        return request.post("/xxxx2",data)
    } 
    
    // 更新用户信息 -- 需要使用Token
    export function customUserUpdate(data){
        return request.post("/xxxx3",data,{needToken: true})
    }

组件中使用

import { customUserLogin, customUseRegister,customUserUpdate } from '@/api/index.js'
    
    customUserUpdate(data).then((res) => {
      console.log('成功', res);  
    }).catch((err) => { 
      console.error('登录失败', err);
    });