uniapp接口封装

我们在写一个网页之后需要跟后端进行对接，将数据导入我们的网页里来

封装前我们需要一个接口 一个完善的网页

接口页

网页文件

在网页内封装两次 第一次封装 建立文件夹 utils 在这个文件夹内新建一个js文件 request 这里的基地址是接口页面的 网页这一段复制过去就ok

export const baseURL = '基地址'
 
export const request = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL + options.url, //接口地址：前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法：传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数：传入的参数或者默认传递空集合
			header: {
				'token': uni.getStorageSync("token") || "" //自定义请求头信息
			},
			success: (res) => {
				console.log(res, uni.getStorageSync('token'));
				//返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)
				if (res.data.code == 1) {
					resolve(res.data.data)
				} else {
					if(res.data.code== 401){
						uni.navigateTo({
							url:'/login/login'
						})
						uni.clearStorageSync()
					}
					reject(res.data.msg)
				}
				// 如果不满足上述判断就输出数据
			},
			// 这里的接口请求，如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log(err)
				reject(err)
			}
		})
	})

完成这次封装之后再一次新建文件夹 api 然后在这个文件夹里面新建js文件

首页接口的地址 如下图 直接复制过去就ok啦

import {
	request
} from '@/utils/request.js'
 
 
 // 获取首页接口 /api/index/index
export const getIndex = ( ) => request({url: '/api/index/index',method: 'post',data: { }})

封装之后就可以用了 在需要调接口的页面进行调用

在script 里面先写一行引入

import {getIndex} from"@/api/index"

在去定义一下

onLoad() {
			this.getIndex()
		},

然后在方法里调用

getIndex 是自定义的名字

async getIndex(){
				try{
					const res =await getIndex()
					this.list5=this.lunbo.   //将接口数组赋值给页面循环的数组然后进行渲染就行了
					console.log('getIndex',res);
				}catch(err){
					uni.showToast({title:err, icon:'none'})
					console.log('getIndex',err);
				}
			},
                        

注意 在 接口大概就是这样调用