uniapp封装request请求

方法1：

1. 先建立一个 http 文件夹 + api.js 文件 + request.js 文件

2. 在 request.js 文件

const baseUrl = 'http://192.168.11.22:8080'; // 后端的主机名 + 端口号

// 带 Token 请求
const httpTokenRequest = (opts, data) => {
	uni.onNetworkStatusChange(function(res) {
		if (!res.isConnected) {
			uni.showToast({
				title: '网络连接不可用！',
				icon: 'none'
			});
		}
		return false
	});
	let token = uni.getStorageSync('token');
	if (token == '' || token == undefined || token == null) {
		uni.showToast({
			title: '账号已过期，请重新登录',
			icon: 'none',
			complete: function() {
				uni.reLaunch({
					url: '/pages/login/index'
				});
			}
		});
	} else {
		let httpDefaultOpts = {
			url: baseUrl + opts.url,
			data: data,
			method: opts.method || 'GET',
			header: opts.method == 'get' ? {
				'X-Access-Token': token,
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": "application/json; charset=UTF-8"
			} : {
				'X-Access-Token': token,
				'X-Requested-With': 'XMLHttpRequest',
				'Content-Type': 'application/json; charset=UTF-8'
			},
			dataType: 'json',
		}
		let promise = new Promise(function(resolve, reject) {
			uni.request(httpDefaultOpts).then(
				(res) => {
					if (res[1].data.code == 200) {
						resolve(res[1])
					} else {
						if (res[1].data.code == 5000) {
							// uni.showModal({
							// 	title: '提示',
							// 	content: res[1].data.message,
							// 	success: function (res) {
							// 		if (res.confirm) {
							// 			uni.reLaunch({
							// 				url: '/pages/login/login'
							// 			});
							// 			uni.clearStorageSync();
							// 		} 
							// 	}
							// });
							uni.reLaunch({
								url: '/pages/login/index'
							});
							uni.clearStorageSync();
						} else {
							resolve(res[1])
							// uni.showToast({
							// 	title: '' + res[1].data.message,
							// 	icon: 'none'
							// })
						}
					}
				}
			).catch(
				(response) => {
					reject(response)
				}
			)
		})
		return promise
	}
};

// 导出去
export default httpTokenRequest;

3. 在 api.js 文件

//引入request.js文件
import request from "./request";

// 封装的轮播方法
export function getBanners(data) {
    return request({
        url: "/banner", // 这个地址是去掉公共地址剩下的地址
        method: "GET", // 请求方式 支持多种方式  get post put delete 等等
        data //发送请求要配置的参数 无参数的情况下也可以不写
    });
}

4. 在页面中使用

<script>
import { getBanners } from "../http/api"; // 1.引入需要的接口

export default {
  name: "Home",
  methods: {
    getUser(){ 
        uni.showLoading({
          title: '加载中'
        });
        getBanners('有参数就填这里，没有参数就空着').then((res) => {
          console.log(res);
          uni.hideLoading(); // 关闭加载中弹框
          if (res.status == 200) {
            this.projectList = res.data.data;
          } else { }
        }).catch((err) => {
          console.log(err); 
        });
    }
  }
};
</script>

完事。。。。。。

方法2：(挂载到全局)

1. 先建立一个 http 文件夹 + api.js 文件

2. 在 api.js 文件

const BASE_URL = 'http://192.168.11.22:8080'; // 后端的主机名 + 端口号

export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res) => {
				if (res.data.status != 0) { // 这里根据后端的返回状态码来改
					return uni.showToast({
						title: '获取数据失败！',
						icon: 'fail'
					});
				}
				resolve(res);
			},
			fail: (err) => {
				uni.showToast({
					title: '请求接口失败(可能服务器没有开)',
					icon: 'fail'
				})
				reject(err)
			}
		})
	})
}

3. 挂载到 main.js 中

import { myRequest } from './http/api.js' // 引入api文件
Vue.prototype.$http = myRequest // 挂载到原型上

4. 页面中使用

<script>
  export default {
    methods: {
      async getUser(){ 
          uni.showLoading({
            title: '加载中'
          });
          const res = await this.$http({ // 这里需要传一个对象
            url: '/api/getBanners', // 这是请求网址的地址
            method: 'POST', // 如果请求方式是get，可以省略
            data: { xxxxx } // 这里是我们要传的参数
          })
          console.log( res ) // 打印出来看我们请到的数据
      }
    }
  };
</script>