uniapp調用api顯示輪播圖

接口文檔如下

實現思路

• 因為返回數據為數組方式，所以可以將我們要的數據存放到數組里面
  

• 接收到數據之后，我們可以在頁面中寫使用uniapp官方提供的swiper組件展示輪播圖
• 然后使用一個for循環，遍歷存放在數組中的數據進行展示
  

開始

1、 封裝一個api.js

將request請求封裝到一個單獨的js文件中
代碼如下

const BASE_URL = 'XXXXXX' //接口地址
export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			header: {
				Accept: 'application/json',
				'Content-Type': 'application/json',
				'X-Requested-With': 'XMLHttpRequest'
			},
			sslVerify: true,
			success: ({
				data,
				statusCode,
				header
			}) => {
				if (statusCode !== 200) {
					return uni.showToast({
						title: '獲取數據失敗'
					})
				}
				resolve(data)
			},
			fail: (err) => {
				uni.showToast({
					title: '請求接口失敗'
				})
				reject(err)
			}
		})
	})
}

2、寫request請求