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

网友投稿 1034 2022-06-06


  • 在项目 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 的其他内容,期待你的带来



版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:JavaScript数组的几个常用的API(javascript数组有哪些方法)
下一篇:SpringBoot统一api返回 SpringBoot统一api返回风格的实现(springboot @api)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~