uniapp的request封装接口使用

1.创建request.js文件

2.基本使用

2.1 request.js

//这里是抛出去的意思
export default{
    a:1
}

2.2 调用者使用

import $http from '@/common/api/request.js' // 先import引入

console.log($http.a) // 1 

3.进阶使用

3.1 request.js

// 这里是抛出去的意思
export default {
	a:1,
	// 这是一个公共模板
	common:{
		baseUrl:"http://192.168.126.1:3000/api",
		// 前端穿个后端的数据
		data:{},
		// 设置请求的 header
		head:{
			'content-type':"application/json",
			'content-type':"application/x-www-form-urlencoded"
		},
		// 默认的是get请求
		method:"GET",
		dataType:"json"
	},
	// 这是一个方法,request默认传进来的是对象,防止一些错误
	request(options={}){
		
		// 加载框
		// uni.showLoading({
		// 	title:'加载中'
		// }),
		
		// 传进来的url拼接上方的公共url
		options.url=this.common.baseUrl+options.url
		// 要是接口使用的时候传过来了就是用第一个 则 使用上方的公共模板
		options.data=options.data || this.common.data
		options.head=options.head || this.common.head
		options.method=options.method || this.common.method
		options.dataType=options.dataType || this.common.dataType
		// 返回一个promise res是成功 rej是失败
		return new Promise((res,rej)=>{
			// 这个是真正用来请求的
			uni.request({
				...options,
				success:(result) => {
					// 要是404就是失败
					if(result.statusCode !=200){
						return rej()
					}
					// 成功拿到数据之后就会隐藏加载框
					// setTimeout(function(){
					// 	uni.hideLoading()
					// },1000)
					// 接收url的数据
					let data=result
					// 成功返回数据给用的地方
					res(data)
				}
			})
		})
		
	}
}

3.2 调用者使用

import $http from '@/common/api/request.js' // import引入

$http.request({
	url:"/index_list", //这里只传递url，其他数据默认(在request.js中common公共模板中)
}).then((res)=>{ //这里是调用接口成功的
	console.log(res) //成功返回url接口的数据
	uni.showToast({ //这是一个提示框信息
		title: '请求成功',
		icon: 'none',
		duration: 2000
	})
}).catch((res)=>{ //这里是调用接口失败的
	uni.showToast({ //这是一个提示框信息
		title:'请求失败',
		icon:'none'
	})
})