网络请求及封装工具类

发起网络请求，在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。 uni.request：用户发送网络请求，请求数据接口

uni.request({
    url: 'https://请求路径', //接口地址。
    data: {
        name: 'xk857'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

网络请求的封装

说明，我后端返回的数据都是统一了格式的，各位根据自己后端的格式进行修改，格式如下：

{
  "code": 20000, // 请求码，20000代表正常
  "msg": "成功", // 提示信息，出现错误的提示信息例如：登录失败、权限不足等
  "data": {} // 真正返回的数据，例如文章列表、逻辑值、我的个人信息等，可以是对象也可以是数组
}

封装接口请求工具类 request.js

// 基础请求路径
let BASE_URL = 'https://api.xk857.com'

const request = (options = {}) => {

	// 判断是否有访问令牌，补充：用户登录获取到token后使用此命令存储：uni.setStorageSync('storage_key', 'hello')
	const accessToken = uni.getStorageSync('token')
	if (accessToken) {
		options.header = {
			'token': `${accessToken}`
		}
	}

	// resolve 正常响应，reject异常响应
	return new Promise((resolve, reject) => {
		if (options.loading) {
			uni.showToast({title: '数据请求中',duration: 2000,icon: 'loading'});
		}
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			timeout: 8000, // 8秒超时时间，单位ms
			header: options.header || {},
			success: (res) => {
				uni.hideToast() // 隐藏loading
                // TODO 各位根据自己后端的格式来，下面是根据我的后端所作出的处理，resolve是正常返回，reject是抛出异常
				if (res.data.code === 20000) {
					resolve(res.data.data)
					return
				} else if (res.data.code === 20007) {
					// msg("登录过期，请先登录") 提示信息
					reject(res.data)
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				} else {
					msg(res.data.msg)
					reject(res.data)
					return
				}
			},
			fail: (err) => {
				uni.hideToast()
				reject(err)
				return
			}
		})
	})
}

// 导出
export default request

创建接口请求js文件

然后新建 api/word.js 用来存放真正的请求地址

import request from '@/common/request.js'

export default {
	
	// 单词查询
	searchApi(type,page,check) {
		return request({
			url: `/api/v1/word/search/${type}/${page}/${check}`,
			method: 'POST',
			loading: true
		})
	},
	
	// 更改单词状态
	starApi(id) {
		return request({
			url: `/api/v1/word/update/type/${id}`,
			method: 'GET'
		})
	},
	
	// 获取不同状态的单词个数
	getNumApi(type, check) {
		return request({
			url: `/api/v1/word/get/num/${type}/${check}`,
			method: 'GET'
		})
	},
	// 查询关卡数量
	getCheckNumApi() {
		return request({
			url: `/api/v1/word/get/check/num`,
			method: 'GET'
		})
	},
	// 添加单词
	addApi(check,data) {
		return request({
			url: `/api/v1/word/add/list/${check}`,
			method: 'POST',
			data
		})
	},	
}

使用方法

<script>
	import api from '@/api/word.js' // 1.导包
	export default {
		methods: {
			async getCheck() {
                try{
                    const data = await api.getCheckNumApi() // 2.调用接口
					this.checkList = data
                }cache(e) {
                    // 3.接口返回错误信息，根据业务仅处理
                }
			}
        }
	}
</script>

uni.request：用户发送网络请求，请求数据接口

uni.request({
    url: 'https://请求路径', //接口地址。
    data: {
        name: 'xk857'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

网络请求的封装

说明，我后端返回的数据都是统一了格式的，各位根据自己后端的格式进行修改，格式如下：

{
  "code": 20000, // 请求码，20000代表正常
  "msg": "成功", // 提示信息，出现错误的提示信息例如：登录失败、权限不足等
  "data": {} // 真正返回的数据，例如文章列表、逻辑值、我的个人信息等，可以是对象也可以是数组
}

封装接口请求工具类 request.js

// 基础请求路径
let BASE_URL = 'https://api.xk857.com'

const request = (options = {}) => {

	// 判断是否有访问令牌，补充：用户登录获取到token后使用此命令存储：uni.setStorageSync('storage_key', 'hello')
	const accessToken = uni.getStorageSync('token')
	if (accessToken) {
		options.header = {
			'token': `${accessToken}`
		}
	}

	// resolve 正常响应，reject异常响应
	return new Promise((resolve, reject) => {
		if (options.loading) {
			uni.showToast({title: '数据请求中',duration: 2000,icon: 'loading'});
		}
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			timeout: 8000, // 8秒超时时间，单位ms
			header: options.header || {},
			success: (res) => {
				uni.hideToast() // 隐藏loading
                // TODO 各位根据自己后端的格式来，下面是根据我的后端所作出的处理，resolve是正常返回，reject是抛出异常
				if (res.data.code === 20000) {
					resolve(res.data.data)
					return
				} else if (res.data.code === 20007) {
					// msg("登录过期，请先登录") 提示信息
					reject(res.data)
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				} else {
					msg(res.data.msg)
					reject(res.data)
					return
				}
			},
			fail: (err) => {
				uni.hideToast()
				reject(err)
				return
			}
		})
	})
}

// 导出
export default request

创建接口请求js文件

然后新建 api/word.js 用来存放真正的请求地址

import request from '@/common/request.js'

export default {
	
	// 单词查询
	searchApi(type,page,check) {
		return request({
			url: `/api/v1/word/search/${type}/${page}/${check}`,
			method: 'POST',
			loading: true
		})
	},
	
	// 更改单词状态
	starApi(id) {
		return request({
			url: `/api/v1/word/update/type/${id}`,
			method: 'GET'
		})
	},
	
	// 获取不同状态的单词个数
	getNumApi(type, check) {
		return request({
			url: `/api/v1/word/get/num/${type}/${check}`,
			method: 'GET'
		})
	},
	// 查询关卡数量
	getCheckNumApi() {
		return request({
			url: `/api/v1/word/get/check/num`,
			method: 'GET'
		})
	},
	// 添加单词
	addApi(check,data) {
		return request({
			url: `/api/v1/word/add/list/${check}`,
			method: 'POST',
			data
		})
	},	
}

使用方法

<script>
	import api from '@/api/word.js' // 1.导包
	export default {
		methods: {
			async getCheck() {
                try{
                    const data = await api.getCheckNumApi() // 2.调用接口
					this.checkList = data
                }cache(e) {
                    // 3.接口返回错误信息，根据业务仅处理
                }
			}
        }
	}
</script>