uni-app 封装api请求

简介: 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);
});
• 1

以上示例代码展示了如何使用封装的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);
});
目录
相关文章
|
21天前
|
存储 BI Android开发
全开源仿第八区H5APP封装打包分发系统源码
全开源仿第八区H5APP封装打包分发系统源码
81 4
|
24天前
|
存储 Kubernetes API
【APIM】Azure API Management Self-Host Gateway是否可以把请求的日志发送到Application Insights呢?让它和使用Azure上托管的 Gateway一样呢?
【APIM】Azure API Management Self-Host Gateway是否可以把请求的日志发送到Application Insights呢?让它和使用Azure上托管的 Gateway一样呢?
|
24天前
|
API C#
【Azure API 管理】APIM如何实现对部分固定IP进行访问次数限制呢?如60秒10次请求
【Azure API 管理】APIM如何实现对部分固定IP进行访问次数限制呢?如60秒10次请求
|
24天前
|
API
【Azure 应用服务】在App Service中调用外部服务API时需要携带客户端证书,而多次调用的情况下会出现WindowsCryptographicException Keyset does not exist异常
【Azure 应用服务】在App Service中调用外部服务API时需要携带客户端证书,而多次调用的情况下会出现WindowsCryptographicException Keyset does not exist异常
|
24天前
|
存储 API
【Azure API 管理】为调用APIM的请求启用Trace -- 调试APIM Policy的利器
【Azure API 管理】为调用APIM的请求启用Trace -- 调试APIM Policy的利器
|
25天前
|
存储 安全 API
【Azure API 管理】在APIM中使用客户端证书验证API的请求,但是一直提示错误"No client certificate received."
【Azure API 管理】在APIM中使用客户端证书验证API的请求,但是一直提示错误"No client certificate received."
|
25天前
|
安全 API
【Azure API 管理】Azure API Management通过请求中的Path来限定其被访问的频率(如1秒一次)
【Azure API 管理】Azure API Management通过请求中的Path来限定其被访问的频率(如1秒一次)
|
1月前
|
机器人 API Python
智能对话机器人(通义版)会话接口API使用Quick Start
本文主要演示了如何使用python脚本快速调用智能对话机器人API接口,在参数获取的部分给出了具体的获取位置截图,这部分容易出错,第一次使用务必仔细参考接入参数获取的位置。
|
19天前
|
存储 JSON API
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
——在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦! 淘宝API接口(如淘宝开放平台提供的API)允许开发者获取淘宝商品的各种信息,包括商品详情。然而,需要注意的是,直接访问淘宝的商品数据API通常需要商家身份或开发者权限,并且需要遵循淘宝的API使用协议。
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
|
29天前
|
SQL 存储 数据处理