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

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