uniapp中请求的封装和使用

150 阅读1分钟

新建config.js文件

const IS_DEVELOPMENT = process.env.NODE_ENV === "development" ? true : false; // 判断是否为生成环境

export default {
  isExternalJump: false, // 其他平台跳转
  tabList: [{ name: "账号登录" }, { name: "手机号登录" }], // 登录方式
  baseURL: IS_DEVELOPMENT ? "http://xxx.xxx.xx.xx:xxxx" : "http://xxx.xxx.x.xx:xxx", // 请求地址
};

新建request.js文件

import config from "./config.js";
// 获取当前页面的信息
function useInit() {
  const pages = getCurrentPages();

  const page = pages[pages.length - 1];
  console.log(page);
  const { fullPath } = page.$page;

  const {
    name: pageName,
    path: pagePath,
    query: pageQuery,
  } = parseUrl(fullPath);
  return {
    pageName,
    pagePath,
    pageQuery,
  };
}
// 获取token
// const TOKEN = uni.getStorageSync("token");
/**
 *  拦截器
 * @param {*} options
 */
let Interceptor = (options) => {
  options.url = config.baseURL + options.url;
  options.dataType = options.dataType || "json";
  options.data = {
    ...options.data,
  };
  options.header = {
    // token: TOKEN,
    "content-type": "application/json",
    ...options.header,
  };
  const token = uni.getStorageSync('token')
  if(token){
	options.header['Authorization'] = 'Bearer' + token  
  } else{
	  uni.showToast({
	  	title: '请前往登录页面',
		icon: 'error'
	  })
	  const currentPageInfo = useInit()
	  if(currentPageInfo.pageName !== "login"){
		  uni.reLaunch({
		  	url: '/pages/login/login'
		  })
	  }
  }
  options.method = options.method;

  //如果传入loading为true,则显示loadding
  if (options.isloading) {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
  }
  return options;
};

/**
 * 响应器
 * @param {*} res
 */
let Responder = (res) => {
	console.log(res)
  uni.hideLoading();
  if (res && res.data) {
    switch (res.statusCode) {
      case 200:
        return Promise.resolve(res.data);
      case 400:
        uni.showToast({
          icon: "error",
          title: "错误请求",
          duration: 2000,
        });
        return Promise.reject({
          msg: "错误请求",
        });
      case 403:
        uni.reLaunch({
          url: "/pages/login/login",
        });
        uni.showToast({
          icon: "error",
          title: "登录失效",
          duration: 2000,
        });
        return Promise.reject({
          msg: "登录失效",
        });
      case 404:
        uni.showToast({
          icon: "error",
          title: "资源加载错误",
          duration: 2000,
        });
        return Promise.reject({
          msg: "资源加载错误",
        });
      default:
        uni.showToast({
          icon: "error",
          title: `服务器异常,状态码:${res.data.code}`,
          duration: 2000,
        });
        return Promise.reject(res.data);
    }
  }
};

/**
 * 请求
 *
 * */
let request = (options = {}) => {
  options = Interceptor(options);
  //发起请求
  return new Promise((resolve, reject) => {
    // 判断有无网络验证
    uni.getNetworkType({
      success(res) {
        if (res.networkType == "none") {
          uni.showModal({
            title: "没有网络",
            content: "请检查您的网络",
            showCancel: false,
            success: (res) => {
              uni.hideLoading();
            },
          });
        } else {
          uni.request({
            ...options,
            success: (res) => {
              resolve(Responder(res));
            },
            fail: (err) => {
              reject(err);
            },
          });
        }
      },
    });
  });
};

export default {
  get(url, data, options = {}) {
    options.url = url;
    options.data = data;
    options.method = "GET";
    return request(options);
  },
  post(url, data, options = {}) {
    options.url = url;
    options.data = data;
    options.method = "POST";
    return request(options);
  },
  put(url, data, options = {}) {
    options.url = url;
    options.data = data;
    options.method = "PUT";
    return request(options);
  },
  delete(url, data, options = {}) {
    options.url = url;
    options.data = data;
    options.method = "DELETE";
    return request(options);
  },
};

新建api文件夹下新建index.js

export function findCategoryListByProductId(data) {
  return http.get(`/xxx/xx/`,data)
}

使用

import {findCategoryListByProductId} from '@/apis/api/index.js'


findCategoryListByProductId({productId:resItem.id}).then()