在項(xiàng)目中我們使用請(qǐng)求 需要通過(guò)api封裝

• 為什么封裝api

因?yàn)樵陧?xiàng)目中 請(qǐng)求使用的地方會(huì)有很多 不利于后期維護(hù) 如果我我們講api封裝出來(lái) 只需要維護(hù)api文件就可以了

這里以u(píng)niapp封裝api來(lái)寫(xiě)小程序?yàn)槔?/h4>

第一步

• 先在項(xiàng)目目錄中創(chuàng)建一個(gè)utils文件夾 在該文件夾下創(chuàng)建一個(gè)js文件為請(qǐng)求的封裝 代碼如下

// 封裝請(qǐng)求
const http = ({url, method='get', data=''}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			method,
			url: `公共請(qǐng)求地址` + url,
			data,
			success(res) {
				resolve(res.data) // 將請(qǐng)求成功后得到的數(shù)據(jù)返回出去 可以用then方法接受到數(shù)據(jù)
			},
			
			fail(err) {
				reject(err) // 將請(qǐng)求失敗后返回的信息 返回出去 可以用catch方法接受到
			},
			
			complete() {
				
			}
		})
	})
}

export default http;

第二步

• 在utils文件夾下創(chuàng)建一個(gè)api.js 這里以請(qǐng)求輪播圖數(shù)據(jù)的接口為例

import http from './http.js'

// 請(qǐng)求輪播圖數(shù)據(jù)的接口
export const getSwiper = () => http({url: '你們自己的請(qǐng)求輪播圖數(shù)據(jù)的接口地址'})

第三步

• 在需要使用輪播圖接口的文件中

	import { getSwiper } from '../../utils/api.js'
	export default {
		data() {
			return {
				swiper: []
			}
		},
		async created() {
			let {message} = await getSwiper() // message就是我們請(qǐng)求完成后獲取的數(shù)據(jù)信息
			this.swiper = message
		},
	}