uni.request 请求封装

盲写记录，写的潦草，仅供参考

加载动画

function showLoading() {
  //防止重复loading
  if (excutingList.length == 1) {
    //mask:true 防止触摸穿透
    uni.showLoading({title: "加载中",mask:true});
  }
}
function hideLoading() {
  if (excutingList.length == 0) {
    uni.hideLoading();
  }
}

请求队列，这里也可以判断接口是否在请求中，取消上次请求这种操作，不过不建议，不利于堆屎山

const excutingList = []; // 执行队列
export const request = (params, loading) => {
  if (loading !== false) {
    excutingList.push(request);
    showLoading();
  }
  return requestPromise(params);
};

数据请求地址

//h5
export let baseUrl = '/api'
//app
if (process.env.NODE_ENV === 'development') {
    /*#ifdef APP-PLUS*/
    // 测试环境（基座环境）
    baseUrl = 'https://xxxxxxxxxxxxxx'
    /*#endif*/
} else {
    // 生产环境（打包环境）
    baseUrl = 'https://xxxxxxxxxxxxxx'
}

取消全部请求,有问题（待）

function clearAllRequest() {
  excutingList.map((item) => {
    if (item && item.abort) {
      item.abort();
    }
  });
  hideLoading();
  excutingList.length = 0;
}

发起请求

export const CONTENT_TYPE_JSON = 'application/json'
export const CONTENT_TYPE_FORM = 'application/x-www-form-urlencoded'
export const requestPromise = (params, callBack) => { 
  let url = params.url || "";
  let method = params.method || "GET";
  let data = params.data || {};
  let headerObj = {
    "content-type":params.contentType || CONTENT_TYPE_JSON
  }
  let responseType = params.responseType || ''
  return new Promise((resolve, reject) => {
    uni.request({
      url: url,
      method: method,
      data: data,
      header: headerObj,
      responseType: responseType,
      dataType: "json",
      complete(res) {
        let index = excutingList.indexOf(requestPromise);
        excutingList.splice(index, 1);
        hideLoading();
      },
      success(response) {
        这里还可以校验是否登录过期，主要看后端咋返回
        if(登录过期){
            clearAllRequest()
        }
        resolve(response);
      },
      fail(error) {
        reject(error);
      },
    });
  });
};

用法，下面baseUrl为啥不封装在request里面，因为后端代理老时不时加多一个，太烦了

import {
	request,
	CONTENT_TYPE_FORM,
} from '@/utils/request.js'
import {
	baseUrl
} from '@/utils/requestUrlConfig.js'
export function login(params, token) {
	return uni.request({
		method: 'POST',
		url: baseUrl + '/login',
		data: params,
		header: {
			'content-type': CONTENT_TYPE_FORM,
			'Authorization': token
		}
	})
}

这里是uni.uploadFile，看看就行了

export const dutyUpload = (params) => {
	uni.showLoading({title: "加载中"});
	return UploadPromise(params)
}

//发起上传
export const UploadPromise = (params) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: baseUrl + params.url;,
      filePath: params.filePath,
      name: params.name,
      formData: params.formData,
      header: {
        user: "xxxxxxxxxxxxxxxxxx",
      },
      success: (uploadFileRes) => {
        if (uploadFileRes.statusCode == 200) {
          console.log("上传成功");
          resolve(uploadFileRes.data);
          hideLoading();
        } else {
          uni.showToast({
            title: "上传失败",
            icon: "none",
            duration: 1500,
          });
          reject("上传失败");
        }
      },
      fail: (err) => {
        uni.showToast({
          title: "上传失败",
          icon: "none",
          duration: 1500,
        });
        reject("上传失败");
      },
    });
  });
};

用法

import {
	dutyUpload,
	CONTENT_TYPE_FORM,
} from '@/utils/request.js'
import {
	baseUrl
} from '@/utils/requestUrlConfig.js'
export function imageRecog(filePath,name,formData) {
	return dutyUpload({
		url: baseUrl+'/upload',
		filePath:filePath,//要上传文件资源的路径
		name:name,//上传的文件key
		formData: formData,//HTTP 请求中其他额外formdata参数
	})
}