uni-app 超详细Request封装及使用

126 阅读1分钟

为了方便小白使用,稍微写的详细一些
request文件夹,index.js文件代码:

function request(obj) {
  obj.url = obj.url || ''; // 请求路径
  obj.method = obj.method || 'GET'; //请求方式
  obj.data = obj.data || {}; //请求携带的数据
  obj.header = {
    // ...obj.header,
    token: uni.getStorageSync('token') || '',//接口有做token验证的话,记得在登陆成功之后把token存到Storage(可使用setStorageSync方法)
    // userId: uni.getStorageSync('user')?.id || '',//根据需要配置
	'content-type': 'application/json',
  }
  obj.loading = obj.loading === false ? false : true; //是否显示请求加载中
  obj.requestTime = obj.requestTime || 300; //多久时间内完成网络请求,则不显示提示框
  let loadingStatus = true;
  //定义网络请求如果在一定时间内没有完成,则显示加载中提示框,默认时间为:300毫秒
  setTimeout(() => {
    if (loadingStatus && obj.loading) {
      uni.showLoading({
        title: "加载中",
        mask: true
      })
    }
  }, obj.requestTime)
  //返回Promise对象
  return new Promise((resolve, reject) => {
      uni.request({
        url: 'https://www.baidu.com:8088' + obj.url,?/连接的服务器地址
        method: obj.method,
        data: obj.data,
        header: obj.header,
        success: res => {
			uni.hideLoading();
			resolve(res.data);
			
        },
        fail: err => {
          reject(err);
		  uni.showToast({
		  			title:'请求失败,请重试!',
		  			icon:"none"
		  		});
        },
        complete: () => {
		if (loadingStatus && obj.loading) {
			uni.hideLoading();
                    }
		 loadingStatus = false;
		}
      })
    
  });
}
export default request

配置接口api.js(我的接口比较少我就都配置在了index文件 api/index.js)\

import request from '@request/index.js'
export function login(params) {
	return request({
		url: `/admin/index/login`,
		method: 'POST',
		data: params,
	});
}
//记录详情
export function getRecordDetail(id) {
	return request({
		url: `/admin/game/findGameRecord/${id}`,
		method: 'GET',
	});
}

调用接口

import {login} from '@/request/api.js'
login(params).then( res => {
	if(res.code === 200){
		uni.navigateTo({
			url:'/pages/index/index'
                    });
                  uni.setStorageSync('token',res.data.token);
		}else{
			alert(res.message);
		}
	}).catch(err => {
		console.log(err);
	});