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 的其他内容,期待你的到来。

相关文章
|
6天前
|
机器学习/深度学习 JSON 算法
淘宝拍立淘按图搜索API接口系列的应用与数据解析
淘宝拍立淘按图搜索API接口是阿里巴巴旗下淘宝平台提供的一项基于图像识别技术的创新服务。以下是对该接口系列的应用与数据解析的详细分析
|
23天前
|
JSON API 数据格式
eBay商品详情接口(ebay API系列)
eBay 商品详情接口是电商从业者、开发者和数据分析师获取商品详细信息的重要工具,涵盖标题、价格、库存、卖家信息等。使用前需在 eBay 开发者平台注册并获取 API 凭证,通过 HTTP GET 请求调用接口,返回 JSON 格式数据。Python 示例代码展示了如何发送请求并解析响应,确保合法合规使用数据。
57 12
|
22天前
|
JSON API 数据格式
阿里巴巴商品详情接口(阿里巴巴 API 系列)
在电商开发中,获取阿里巴巴商品详情信息对数据分析、竞品研究等至关重要。通过调用其商品详情接口,开发者可获取标题、价格、图片、描述等数据,满足多种业务需求。接口采用HTTPS协议,支持GET/POST请求,返回JSON格式数据。示例代码展示了如何使用Python的requests库进行接口请求,需传递商品ID和访问令牌。实际应用时,请依据官方文档调整参数并确保安全性。
53 10
|
5天前
|
存储 缓存 监控
如何高效爬取天猫商品数据?官方API与非官方接口全解析
本文介绍两种天猫商品数据爬取方案:官方API和非官方接口。官方API合法合规,适合企业长期使用,需申请企业资质;非官方接口适合快速验证需求,但需应对反爬机制。详细内容涵盖开发步骤、Python实现示例、反爬策略、数据解析与存储、注意事项及扩展应用场景。推荐工具链包括Playwright、aiohttp、lxml等。如需进一步帮助,请联系作者。
|
18天前
|
JSON API 数据格式
淘宝商品评论数据API接口详解及JSON示例返回
淘宝商品评论数据API接口是淘宝开放平台提供的一项服务,旨在帮助开发者通过编程方式获取淘宝商品的评论数据。这些数据包括评论内容、评论时间、评论者信息、评分等,对于电商分析、用户行为研究、竞品分析等领域都具有极高的价值。
|
10月前
|
开发框架 JSON .NET
初学者不会写接口怎么办?微软Visual Studio 2022无脑式API接口创建——Swagger一键导入APIKit快速测试
初学者不会写接口怎么办?微软Visual Studio 2022无脑式API接口创建——Swagger一键导入APIKit快速测试
467 0
|
1月前
|
API PHP 开发者
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
|
1月前
|
JSON API 数据格式
微店商品列表接口(微店 API 系列)
微店商品列表接口是微店API系列的一部分,帮助开发者获取店铺中的商品信息。首先需注册微店开发者账号并完成实名认证,选择合适的开发工具如PyCharm或VS Code,并确保熟悉HTTP协议和JSON格式。该接口支持GET/POST请求,主要参数包括店铺ID、页码、每页数量和商品状态等。响应数据为JSON格式,包含商品详细信息及状态码。Python示例代码展示了如何调用此接口。应用场景包括商品管理系统集成、数据分析、多平台数据同步及商品展示推广。
|
26天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
61 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

热门文章

最新文章