封装uniapp网络请求, 统一管理接口和怎么使用(完整版)

在项目开发的过程中，请求网络接口获取数据是我们前端开发人员经常需要做的工作，我们知道接口会有很多很多，我们不可能在每一个页面中发起每一个请求的时候都重复的去写那些一样的网络请求代码，那样不仅看起来很冗余，而且还不利于后期的维护，将测试环境下的接口地址改为生产环境下的接口地址会显得非常的麻烦，所以我们经常需要对网络请求进一步封装，把公共的部分提取出来，使我们的开发工作更加的方便。
首先来封装一下网络请求，在项目的根目录下，创建api文件夹，然后在创建request.js文件写入以下代码：

/**
 * 通用uni-app网络请求
 * 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
 */
import tool from '../tool/tool' // 这个是我自己封装简化一下uni.showToast提示组件，可以不写
export default {
	config: {
		// 请求的公共url
		// baseUrl: "http://192.168.1.11:8080/",
		baseUrl: "http://lll.hhh-ai.com/", // 并非真实接口地址，换成自己的接口地址
		header: {
			// 'Content-Type': 'application/json;charset=UTF-8'
			'Content-Type': 'application/x-www-form-urlencoded',
		},
		data: {},
		method: "GET",
		dataType: "json",
		/* 如设为json，会对返回的数据做一次 JSON.parse */
		responseType: "text",
		success() {},
		fail() {},
		complete() {}
	},
	// 请求拦截器
	interceptor: {
		request: null,
		response: null
	},
	request(options) {
		if (!options) {
			options = {}
		}
		// 获取登录后存储在本地的token信息
		let token = uni.getStorageSync('token')
		let requestType = options.url.split('/')
		let typeVal = requestType[requestType.length - 1]
		console.log(typeVal)
		if (typeVal !== 'userLogin' && typeVal !== 'register' && typeVal !== 'sendSms') {
			// 判断筛选出以上三个页面不需要为请求头设置token，根据自己的项目情况而定
			this.config.header.Authorization = token
		} else {
			delete this.config.header.Authorization
		}
		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) => {
				uni.hideLoading()
				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) {
					tool.msg(msg)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/public/login'
						})
					}, 1000)
					reject(response)
				} else if (code === 0) {
					tool.msg(msg)
					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);
		});
	},
	// 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)
	},
	// delete请求
	delete(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'DELETE'
		return this.request(options)
	}
}
// 在main.js中引入
import api from '@/api'
Vue.prototype.$api = api

我是使用的promise进行封装的。对promise封装的注意点：
首先要有返回值 return；
resolve,是成功时直接调用。将要传递的参数放入进去resolve(res)；
reject失败错误直接调用。将要传递的参数直接放进去reject(err)。

注意
在一个模块中，可以同时使用export default 和export 向外暴露成员；
使用export向外暴露的成员，使用{ }的形式来接收，这种形式，叫做按需导出；
使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收；
使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名。

网络请求封装完成后要在main.js中全局引入，这样才能保证在项目的每一个页面中都可以使用。

import api from '@/api'
Vue.prototype.$api = api

在api文件夹下新建index.js文件, 统一存放接口地址, 以方便后期维护。文件中这样写:

import http from './request'
	const apiList = {
		// 接口地址
		login: (data) => {
			return http.request({
				// 仅作为演示用，并非真实接口地址
				url: 'user/login',
				method: 'POST',
				data
			})
		}
	}

export default apiList

定义global.js文件写请求的公共路径，其实在上面封装请求的过程种已经写到了请求的公共路径，在这里使用global.js文件是为了在后续开发的过程中能方便的使用公共路径，例如：在上传图片或文件到服务器的时候需要用到，就可以方便的使用this.global.baseUrl获取公共的请求路径。

当然了，将global.js文件中的baseUrl当作全局的公共请求路径也是可以的，只需要在上面的request.js请求封装文件中import引入global.js文件，然后在将其中的baseUrl替换成this.global.baseUrl即可。

var baseUrl = '';
console.log(process.env.NODE_ENV)
if (process.env.NODE_ENV == 'development') {
	baseUrl = 'http://192.168.1.11:1080/'
} else {
	baseUrl = 'http://ssss.jj-ai.com/'
}

export default {
	baseUrl 
}

// 在main.js中引入
import global from './api/global.js'
Vue.prototype.global = global

在页面中使用：

methods: {
	request() {
	    var data = {
			mobile: this.mobile,
			password: this.password
		}
		this.$api.login(data).then(res => {
			console.log(res)
		}).catch(err => {
			console.log(err)
		})
	}
}
//监听页面加载
onLoad(option){
	this.request()
}

补充：

这是上面的tool.js文件中的内容

//统一提示组件方便全局修改
const msg = (title, duration = 1500, mask = false, icon = 'none') => {
	if (Boolean(title) === false) {
		return;
	}
	uni.showToast({
		title,
		duration,
		mask,
		icon
	});
}

export default {
	msg
}

// 在main.js中引入
import tool from '@/tool/tool'
Vue.prototype.$msg = tool.msg