uniApp封装uni.request请求

1.封装请求

新建文件api里面request.js

/**
 * 通用uni-app网络请求
 * 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
 */
export default {
	config: {
		// 请求的公共url
		baseUrl: "url", // 固定请求地址例如 "https://www.abc.com/api"
		header: {
			// 'Content-Type': 'application/json;charset=UTF-8'
			'Content-Type': 'application/x-www-form-urlencoded',
		},
		data: {},
		method: "GET",
		dataType: "json",
		responseType: "text",
		success() {},
		fail() {},
		complete() {}
	},
	// 请求拦截器
	interceptor: {
		request: null,
		response: null
	},
	request(options) {
		if (!options) {
			options = {}
		}
		// 获取登录后存储在本地的token信息
		let token = uni.getStorageSync('tokenValue')
		let requestType = options.url.split('/')
		let page = requestType[requestType.length - 1]
        // 这里判断需要设置请求头token
		if (page !== 'login' && page !== 'register' && uni.getStorageSync('tokenName')) {
			this.config.header[uni.getStorageSync('tokenName')] = token
		} else {
			delete this.config.header[uni.getStorageSync('tokenName')];
		}
		// 请求头设置cookie
		this.config.header.cookie = uni.getStorageSync("sessionId");
		options.baseUrl = options.baseUrl || this.config.baseUrl
		options.dataType = options.dataType || this.config.dataType
		options.url = options.baseUrl + options.url
		options.data = options.data || {}
		options.method = options.method || this.config.method
		// 基于 Promise 的网络请求
		return new Promise((resolve, reject) => {
			// uni.showLoading()
			let _config = null
			options.complete = (response) => {
				// 隐藏loading
				// uni.hideLoading()
				// 从响应头中获取Set-Cookie
				let sessionId = null;
				if (response.header["Set-Cookie"]) {
					sessionId = response.header["Set-Cookie"];
					// 判断是否存在cookie
					if (!uni.getStorageSync("sessionId") && sessionId.indexOf("satoken") > -1) {
						// 存储Set-Cookie
						uni.setStorageSync("sessionId", sessionId);
					}
				}
				let statusCode = response.statusCode
				response.config = _config
				if (process.env.NODE_ENV === 'development') {
					if (statusCode === 200) {
						// console.log("【" + _config.requestId + "】 结果：" + JSON.stringify(response.data))
					}
				}
				if (this.interceptor.response) {
					let newResponse = this.interceptor.response(response)
					if (newResponse) {
						response = newResponse
					}
				}
				// 结构出code、msg
				let { code, msg } = response.data
				// 请求返回400请求报文存在语法错误时reLaunch到登录页
				if (code === 400) {
					// uni.showToast({
					// 	title: "提示",
					// })
					setTimeout(() => {
						// uni.reLaunch({
						// 	url: '/pages/public/login'
						// })
					}, 1000)
					reject(response)
				} else if (code === 0) {
					// uni.showToast({
					// 	title: "提示",
					// })
					resolve(response.data)
				} else {
					resolve(response.data)
				}
			}
			_config = Object.assign({}, this.config, options)
			_config.requestId = new Date().getTime()

			if (this.interceptor.request) {
				this.interceptor.request(_config)
			}
			uni.request(_config);
		});
	},
    // url 为请求路径 data 为需要传递的值 options 进行封装
	// 验证码请求
	code(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'GET'
		options.responseType = "arraybuffer"
		return this.request(options)
	},
	// get请求
	get(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'GET'
		return this.request(options)
	},
	// post请求
	post(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'POST'
		return this.request(options)
	},
	// put请求
	put(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'PUT'
		return this.request(options)
	},
}

2.全局引用?

在main.js内引用

import api from '@/api/request.js'
import Vue from 'vue'
Vue.prototype.$http = api

3.页面请求

需要请求的页面

async fun_Login(){
    // 声明传值
    let data = {
        name: "",
        value: ""
    }
    let res = await this.$http.get("login/login",data ); // 也可以在url后面拼接
    console.log(res); // 请求返回值
}