uni.request接口封装；小程序uni-app接口封装

另一篇请求接口简单封装在api下的index.js

本片资源下载地址

本片封装了post get put请求，重点在request.js文件

1.新增四个文件

2.根目录下的utils下的request.js封装uni.request()请求

注意 ：需要根据自己接口的 statusCode 状态码 、数据状态码 return_code 和提示信息 return_message 做对应替换
需要更改公共地址
需要注意store的token获取
需要注意 封装了get post put请求 需要其他的请求自行继续封装

import store from '../store'

let baseUrl = ''
let isExisited = false

const $https = {}

switch (process.env.NODE_ENV) {
  case 'development':
    // 公共的地址开发
    baseUrl = 'http://172.17.2.112:8080/'
    break
  case 'test':
    baseUrl = 'https://test.epen.ltd/'
    break
  case 'production':
    baseUrl = 'https://production.epen.ltd/'
    break
  default:
    baseUrl = 'https://default.epen.ltd/'
}
console.log('baseUrl', baseUrl)

function httpRequest(settings, opts) {
  const { loading, hasToken, toast, checkToken } = opts
  const token = uni.getStorageSync('token_key')
  const hasUserInfo = store.getters.hasUserInfo
  if (hasToken !== false) {
    settings.header['Token'] = token
    // if (!token) {
    //   uni.showModal({
    //     title: '提示',
    //     content: '身份失效，请重新登录！',
    //     complete: () => {
    //       uni.reLaunch({ url: '/pages/index/index' })
    //     },
    //   })
    //   return
    // }
  }
  let showLoading = loading !== false
  if (showLoading) uni.showLoading({ title: '加载中...', mask: true })
  return new Promise(function (resolve, reject) {
    uni.request({
      ...settings,
      success: (res) => {
        const { statusCode, data } = res
        console.log('接口返回的res', statusCode, res)
        if (showLoading) uni.hideLoading()
        // 判断 statusCode 是否是200 查看接口调用是否成功
        switch (statusCode) {
          case 200:
            break
          case 500:
            // reject({ statusCode: 500, return_message: '服务器重启中...' })
            uni.showToast({
              title: data.return_message || '服务器重启中...',
              duration: 2000,
              icon: 'none',
            })
            return
          default:
            // reject({ statusCode: statusCode, return_message: '请求失败' })
            uni.showToast({
              title: data.return_message || '请求失败,请重试！',
              duration: 2000,
              icon: 'none',
            })
            return
        }

        //在接口200 调用成功后 才能进行判断接口内的状态码 return_code 以此判定作何操作和提示
        const result = res.data
        switch (result.return_code) {
          case '0':
            // 成功的数据data状态码  则直接返回数据
            resolve(result)
            break
          case '4011':
            uni.clearStorage()
            if (hasUserInfo && !isExisited && !checkToken) {
              isExisited = true
              uni.showModal({
                title: '提示',
                content: '身份失效，请重新登录！',
                complete: () => {
                  uni.reLaunch({ url: '/pages/index/index' })
                },
              })
            } else {
              reject(result)
            }
            break
          default:
            reject(result)
            if (toast !== false) showErrors(result)
        }
      },
      fail: (res) => {
        console.log('请求fail', res)
        if (showLoading) uni.hideLoading()
        uni.showToast({
          title: res.return_message || '请求失败,请重试！',
          duration: 2000,
          icon: 'none',
        })
      },
    })
  })
}

function showErrors(res) {
  const { return_code, return_message } = res
  switch (return_code) {
    case 4004:
      uni.showToast({
        title: return_message,
        duration: 2000,
        icon: 'none',
      })
      break
    default:
      uni.showToast({
        title: return_message || '请求失败',
        duration: 2000,
        icon: 'none',
      })
  }
}

function setParams(params) {
  let result = []
  for (let p in params) {
    result.push(`${p}=${params[p]}`)
  }
  return '?' + result.join('&')
}

$https.get = function (opts) {
  const { params, data, toast, hasToken, loading, checkToken } = opts
  if (params) opts.url = opts.url + setParams(params)

  let defaultOpts = {
    url: baseUrl + opts.url,
    data: data,
    method: 'GET',
    header: {
      'X-Requested-With': 'XMLHttpRequest',
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=UTF-8',
    },
    dataType: 'json',
  }
  return httpRequest(defaultOpts, { loading, toast, hasToken, checkToken })
}

$https.put = function (opts) {
  const { params, data, toast, hasToken, loading } = opts

  if (opts.params) opts.url = opts.url + setParams(opts.params)
  let defaultOpts = {
    url: baseUrl + opts.url,
    data: data,
    method: 'PUT',
    header: {
      'X-Requested-With': 'XMLHttpRequest',
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=UTF-8',
    },
    dataType: 'json',
  }
  return httpRequest(defaultOpts, { loading, toast, hasToken })
}

$https.post = function (opts) {
  const { params, data, toast, hasToken, loading } = opts
  if (params) opts.url = opts.url + setParams(params)
  let defaultOpts = {
    url: baseUrl + opts.url,
    data: data,
    method: 'POST',
    header: {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json; charset=UTF-8',
    },
    dataType: 'json',
  }
  return httpRequest(defaultOpts, { loading, toast, hasToken })
}

export { $https, baseUrl }

3.pages/api/modules.js
注意：api下 一个模块js文件 存放一个模块的接口方法

/*
  data为 {}
  请求参数，
  params为 {}, 最后更改为url传参
  opts为 {
    loading: false,
    hasToken: false
  }
  其中loading为false不显示loading框
  hasToken为false, 请求不需要token
  return $https.get({
    url,
    data,
    params,
    ...opts
  })
  return $https.post({
    url,
    data,
    params,
    ...opts
  })
 */
import { $https } from '../../utils/request'
// 获取学生列表
export function getStudentList(params) {
  return $https.get({
    url: `main/stuWork/answersBySerial`,
    params,
    loading: false,
  })
}
// 获取练习下题目信息
export function getQuestionByWorkId(params) {
  return $https.get({
    url: `main/work/queStatus/${params.workId}`,
  })
}
// 获取练习下所有题目批改信息 暂不使用
export function getQuestionCorrectByWorkId(params) {
  return $https.get({
    url: 'main/resource/getQuestion',
    params,
  })
}

// 提交单道题目批改结果
export function submitCorrectAnswer(data) {
  return $https.post({
    url: `main/correction/subCorrResult`,
    data,
    loading: false,
  })
}


// 动态id获取练习信息
export function getExerciseInfo(id) {
  return $https.get(`main/interaction/start/${id}`)
}
// 直接get获取
export function getProductcategory() {
  return $https.get({
    url: `api/v1/accident/productcategory/list`,
  })
}
// get参数获取
export function getInsurancecompany(params) {
  return $https.get({
    url: `api/v1/accident/insurancecompany/list`,
    params,
  })
}
// post参数请求
export function postInsurance(data) {
  return $https.post({
    url: `api/v1/accident/insurance/list`,
    data,
  })
}

4.请求vue页面

<template>
  <view>
    <view>
      objData: {{objData}}
    </view>
    <view style="margin-top:50px;">
      arrData:
      <view v-for="item in arrData" :key="item">{{item}}</view>
    </view>

    <!-- <button type="primary" @click="get">原生请求</button>

    <button type="primary" @click="getType">封装后 async await获取</button>
    <button type="primary" @click="postType">封装后 .then()获取</button> -->
    .
    .
    <button type="primary" @click="get1">utils完全封装--直接get</button>
    <button type="primary" @click="get2">utils完全封装--参数get</button>
    <button type="primary" @click="post1">utils完全封装--post参数</button>
  </view>
</template>

<script>
import { getProductcategory, getInsurancecompany, postInsurance } from "../api/modules";
export default {
  data() {
    return {
      value: 0,
      objData: {},
      arrData: []
    }
  },
  methods: {
    get() {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      })
      uni.request({
        url: 'http://localhost:2222/yiiapp/order/list-all-web',
        data: {
          refund_status: 0,
          action: 'multiple_orders',
          order_type: 0,
          index: 0,
          limit: 10,
          status: 3,
          key: '',
        },
        header: {
          // 使用公众号的Cookie
          Cookie: '_uab_collina=162036568869229763220898; Hm_lvt_79ee0e9f63d4bd87c861f98a6d497993=1621240284,1621300029,1621410251,1621411597; PHPSESSID=mpmdmr4d7vneg6tpmmgm130gu1; user_id=3963; ZHBSESSID=e3aab6cf717a4d549c87735d0c39110e; Hm_lpvt_79ee0e9f63d4bd87c861f98a6d497993=1621504639'
        },
        method: 'POST',
        success: (res) => {
          uni.hideLoading()
          if (res.statusCode !== 200) {
            return uni.showToast({
              title: '获取数据失败',
              icon: "none",
              mask: true,
            })
          }
          console.log('原生获取res', res);
          this.objData = res.data.data
        },
        fail: (error) => {
          uni.hideLoading()
          uni.showToast({
            title: '请求接口失败',
            icon: "none",
          })
          console.log(error);
        }
      })
    },
    async getType() {
      const res = await this.$myRequest({
        url: 'yiiapp/order/list-all-web',
      })
      console.log('使用async await获取返回的参数', res);
      this.objData = res.data
    },
    postType() {
      this.$myRequest({
        url: 'yiiapp/car-ins-stat/get-car-ins-stat',
        method: 'POST',
        data: {
          agency_id: 125,
          stat_date_type: '3',
          dim: 'self-team-insurancecompany'
        }
      }).then(res => {
        console.log('使用.then()获取返回的参数', res);
        this.arrData = res.data
      })
    },
    changeType(e) {
      // console.log(e);
      this.value = e.target.value
    },
    get1() {
      getProductcategory().then(res => {
        console.log('res', res);
        this.arrData = res.data
      })
    },
    get2() {
      getInsurancecompany({ productCategory: 7 }).then(res => {
        console.log('res', res);
        this.arrData = res.data
      })
    },
    post1() {
      let obj = {
        insuranceCompany: "",
        insuranceName: "",
        pageIndex: 15,
        pageSize: 1,
        productCategory: ""
      }
      postInsurance(obj).then(res => {
        console.log('res', res);
        this.arrData = res.data
      })
    }

  }
}
</script>

<style lang="scss">
button {
  width: 260px;
  margin-top: 2px;
}
</style>

5.成功接口请求：

6.失败接口：
404提示：

接口调用成功200 但是data的状态码返回异常 做提示: