uniapp封裝request

在目錄（根目錄）建立檔案夾，并且添加request.js

如圖：

1.配置 request,js

const BASE_URL = 'http://localhost:9090'

export const request = (options => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			header: {
				token: uni.getStorageSync('user') ? uni.getStorageSync('user').token : ''
			},
			data: options.data || {},
			success: (res) => {
				const data = res.data
				if (data.code === 51 || data.code === 52) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				} else if (data.code !== 200) {
					uni.showToast({
						icon:'error',
						title:'操作錯誤'
					})
				}
				resolve(data)
			},
			fail:(error)=>{
				uni.showToast({
					icon:'error',
					title:'系統錯誤'
				})
				reject(error)
			}
		})
	})
})

           

2. 将這個js檔案導入全局配置main.js中

代碼如下：

import {request} from "./utils/request.js";
Vue.prototype.request=request
           

3.運用

例如在login中

圖中框框就是

4.對比原函數

login(){
				//校驗表單
				this.$refs.form.validate().then(res=>{
					const baseUrl="http://localhost:9090"
					uni.request({
					url:baseUrl+'/admin/login',
					method:"POST",
					data:this.form,
					success: (res) => {
						const data=res.data
						if(data.code===200){
							uni.showToast({
								title:'登入成功'
							})
							//存儲使用者到session
							uni.setStorageSync('user',data.data)
							//跳轉到首頁
							uni.navigateTo({
								url:'/pages/index/index'
							})
						}else{
							uni.showToast({
								icon:"error",
								title:data.errormessage
							})
						}
					}
				})
				}).catch(err =>{
					uni.showToast({
						icon:"error",
						title:"表單校驗失敗"
					})
				})
			}
		
           

附錄：改造後的代碼應用

login(){
				//校驗表單
				this.$refs.form.validate().then(res=>{
					this.request({url:'/admin/login',method:"POST",data:this.form}).then(res=>{
						if(res.code===200){
							uni.showToast({
								title:'登入成功'
							})
							//存儲使用者到session
							uni.setStorageSync('user',res.data)
							//跳轉到首頁
							uni.navigateTo({
								url:'/pages/index/index'
							})
						}
					})
				}).catch(err =>{
					uni.showToast({
						icon:"error",
						title:"表單校驗失敗"
					})
				})
			}