uni-app(二)接口请求封装,全局输出api

简介: uni-app 开发
  • 在项目 main.js 同级创建 utils 文件夹,

  • utils里创建 config.js文件,存储重要参数

//  获取平台信息
const {
  system,
} = uni.getSystemInfoSync()


// 请求服务器环境,xxx 在这里是填充,请自行替换
let baseUrl = ['http://xxx', 'https://xxx']

//  小程序重要参数
uni.config = {
  platform: system.startsWith("iOS") ? 2 : 1, // IOS为2 安卓为1
  imgUrl: "https://xxx", // 图片地址前缀
  baseUrl: baseUrl[1],
  appid: "xxx", // appid
}
  • utils里创建request.js文件,封装接口请求

// 登录接口域名
const LOGIN_URL = '/xx/xx'
const {
  baseUrl,
  appid
} = uni.config

// 封装接口请求
uni.http = (args = {}) => {
  let url = args.url || ''
  let data = args.data || {}
  data.appid = appid
    let method = args.method || 'GET'
    return new Promise((resolve, reject) => {
        request(url, data, method, resolve, reject)
    }) 
}

// 接口封装
const request = async (url, data = {}, method, resolve, reject) => {
    let token = await getToken()
    let header = {
      'content-type': 'application/x-www-form-urlencoded',
      'token': token
    }
  uni.request({
    header,
    url: baseUrl + url,
    method,
    data,
    dataType: 'json',
    success: res => {
      if (res.statusCode == 200) {
        let code = res.data.return
        if (code == 0) {
          resolve(res.data)
        } else {
          uni.showModal({
            title: '错误码:' + code,
            content: res.data.result
          })
        }
      }
    },
    fail: err => {
      reject(err)
    }
  })
}

// 获取Token
const getToken = async () => {
  let token = uni.getStorageSync('token')
  if (token) {
    return token
  } else {
    let tokenRes = await login()
    return tokenRes.data.token
  }
}

// 封装登录
const login = () => {
  return new Promise((resolve, reject) => {
    uni.getProvider({
      service: "oauth",
      success(providerRes) {
        let provider = providerRes.provider[0]
        uni.login({
          provider,
          success: (codeRes) => {
            uni.request({
              url: baseUrl + LOGIN_URL,
              method: 'POST',
              header: {
                'content-type': 'application/x-www-form-urlencoded',
                appid
              },
              data: {
                code: codeRes.code
              },
              dataType: 'json',
              success: (res) => {
                if (res && res.statusCode == 200) {
                  // 存储用户信息
                  uni.setStorageSync('status', res.data.data)
                  // 存储用户token
                  uni.setStorageSync('token', res.data.token)
                  resolve(res.data)
                } else {
                  reject(res)
                }
              },
              fail: (err) => {
                reject(err)
              }
            })
          },
          fail: (err) => {
            reject(err)
          }
        })
      }
    })
  })
}
  • utils里创建 api.js文件,整理页面需要的请求,输出api
// 这里举个例子,实际结合自己使用场景
// 获取列表
let getList = function(data) {
    return await uni.http({
        url: "/xxx/xxx",
        data,
        method: "POST"
    })
}

// 全局输出
uni.service = {
    getList
}
  • main.js 引入文件
// 顺序引入,负责参数会访问不到

import '@/utils/config'
import '@/utils/request'
import '@/utils/api'
  • 使用
methods: {
  async getList() {
   let obj = {
      // 参数
    }
    let res = await uni.service.getList(obj)
    if (res.return == 0) {
      // 成功操作
    }
  }
}

好了,你学废了吗,下期整理 uni-app 的其他内容,期待你的到来。

相关文章
|
7天前
|
存储 文件存储 Android开发
仿第八区APP分发下载打包封装系统源码
该系统为仿第八区APP分发下载打包封装系统源码,支持安卓、iOS及EXE程序分发,自动判断并稳定安装。智能提取应用信息,自动生成PLIST文件和图标,提供合理的点数扣除机制。支持企业签名在线提交、专属下载页面生成、云端存储(阿里云、七牛云),并优化签名流程,支持中文包及合并分发,确保高效稳定的下载体验。 [点击查看源码](https://download.csdn.net/download/huayula/90463452)
47 22
|
1月前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
118 8
|
2月前
|
供应链 数据挖掘 API
1688app 商品详情接口系列(1688API)
1688作为国内知名批发采购平台,提供了一系列商品详情接口(API),助力企业和开发者获取商品基础、价格、库存及供应商信息。通过Python示例代码展示如何调用这些接口,应用场景涵盖采购决策辅助、数据分析与市场调研、电商平台整合及供应链管理系统的优化,为企业和采购商提供有力的数据支持,提升业务效率和竞争力。
113 15
|
2月前
|
JSON 数据挖掘 API
京东app商品详情API接口系列(京东 API)
本文介绍了使用 Python 调用京东商品详情 API 的方法。前期需安装 `requests` 库处理 HTTP 请求,导入 `json` 库解析 JSON 数据。接口通过商品 ID 获取详细信息,如价格、图片、评价等。示例代码展示了如何构建请求并处理响应数据。应用场景包括电商开发、市场调研和数据分析等,帮助提升用户体验、优化推荐系统及制定市场策略。
|
2月前
|
JSON 供应链 搜索推荐
淘宝APP分类API接口:开发、运用与收益全解析
淘宝APP作为国内领先的购物平台,拥有丰富的商品资源和庞大的用户群体。分类API接口是实现商品分类管理、查询及个性化推荐的关键工具。通过开发和使用该接口,商家可以构建分类树、进行商品查询与搜索、提供个性化推荐,从而提高销售额、增加商品曝光、提升用户体验并降低运营成本。此外,它还能帮助拓展业务范围,满足用户的多样化需求,推动电商业务的发展和创新。
84 5
|
3月前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
290 6
|
3月前
|
API Python
利用python淘宝/天猫获得淘宝app商品详情原数据 API
要使用Python获取淘宝/天猫商品详情原数据,需先注册开放平台账号并实名认证,创建应用获取API权限。随后,根据API文档构建请求URL和参数,使用requests库发送请求,处理返回的商品详情数据。注意遵守平台使用规则。
|
5月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
6月前
|
API PHP
ThinkPHP 通用的API格式封装
本文介绍了在ThinkPHP框架中如何统一封装API返回格式的方法,包括创建状态码枚举类、编写统一格式化函数以及在BaseController和Error控制器中重写`__call`方法来处理不存在的方法或控制器调用,以实现统一的错误处理和返回格式。
ThinkPHP 通用的API格式封装
|
6月前
|
缓存 测试技术 API
API的封装步骤流程
API封装流程是一个系统化的过程,旨在将内部功能转化为可复用的接口供外部调用。流程包括明确需求、设计接口、选择技术和工具、编写代码、测试、文档编写及部署维护。具体步骤为确定业务功能、数据来源;设计URL、请求方式、参数及响应格式;选择开发语言、框架和数据库技术;实现数据连接、业务逻辑、错误处理;进行功能、性能测试;编写详细文档;部署并持续维护。通过这些步骤,确保API稳定可靠,提高性能。

热门文章

最新文章