更新记录

1.1.1（2024-10-24） 下载此版本

1.1.1 优雅的封装request的网络请求

平台兼容性

插件使用说明

• 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截

1. 配置

1.1 request.js

    // 全局请求封装
    const base_url = 'http://localhost:996'
    // 请求超出时间
    const timeout = 5000

    // 需要修改token，和根据实际修改请求头
    export default (params) => {
     let url = params.url;
     let method = params.method || "get";
     let data = params.data || {};
     let header = {
      'Blade-Auth': uni.getStorageSync('token') || '',
      'Content-Type': 'application/json;charset=UTF-8',
      'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
      'Tenant-Id': uni.getStorageSync('tenantId') || 'xxx', // avue配置相关
      ...params.header
     }
     if (method == "post") {
      header = {
       'Content-Type': 'multipart/form-data' // 自定义，跟后台约定好传什么格式的
      };
     }
     return new Promise((resolve, reject) => {
      uni.request({
       url: base_url + url,
       method: method,
       header: header,
       data: data,
       timeout,
       success(response) {
        const res = response
        // 根据返回的状态码做出对应的操作
        //获取成功
        // console.log(res.statusCode);
        if (res.statusCode == 200) {
         resolve(res.data);
        } else {
         uni.clearStorageSync()
         switch (res.statusCode) {
          case 401:
           uni.showModal({
            title: "提示",
            content: "请登录",
            showCancel: false,
            success() {
             setTimeout(() => {
              uni.navigateTo({
               url: "/pages/login/index",
              })
             }, 1000);
            },
           });
           break;
          case 404:
           uni.showToast({
            title: '请求地址不存在...',
            duration: 2000,
           })
           break;
          default:
           uni.showToast({
            title: '请重试...',
            duration: 2000,
           })
           break;
         }
        }
       },
       fail(err) {
        console.log(err)
        if (err.errMsg.indexOf('request:fail') !== -1) {
         uni.showToast({
          title: '网络异常',
          icon: "error",
          duration: 2000
         })
        } else {
         uni.showToast({
          title: '未知异常',
          duration: 2000
         })
        }
        reject(err);
       },
       complete() {
        // 不管成功还是失败都会执行
        uni.hideLoading();
        uni.hideToast();
       }
      });
     }).catch(() => {});
    };

1.2 api.js

// 引入 request 文件
import request from './request.js'

// 分页查询学习列表
export const pageStudyInfo = (params) => {
 return request({
  url: '/study/studyInfo/page',
  method: 'get',
  data: params,
        header: {} // 自定义
 })
}
// 获取学习列表详细信息
export const studyInfoById = (id) => {
 return request({
  url: `/study/studyInfo/${id}`,
  method: 'get',
 })
}

2. 使用

2.1 页面调用

<script>
  import { pageStudyInfo } from '@/request/api.js'
  export default {
      data() {
          return
      },
      methods: {
          getInfo() {
              // 获取学习列表详情信息
              pageStudyInfo (data).then((res) => {
                console.log('成功', res);
              }).catch((err) => {
                console.error('失败', err);
              });
          }
      }
  }
  </script>