uni-app:第六章 ajax使用

在上一節基礎上

• 封裝網絡請求

const BASE_URL = "https://api.douban.com/v2/movie"

/**
 * 方法調用
 */
export const getInTheaters = params => (
	new Promise((resolve, reject) => {
		uni.request({
			url: `${BASE_URL}/in_theaters`,
			data: params,
			header: {
				"content-type": "json"
			},
			success: (res) => {
				resolve(res);
			}

		});
	})
)


/**
 * 封裝get請求
 */
export const getParamsRequest = (url, params, showLoading) => (
	new Promise((resolve, reject) => {
		if (showLoading) {
			uni.showLoading({
				title: '加載中'
			});
		}
		uni.request({
			url: `${BASE_URL}${url}`,
			method: "GET",
			data: params,
			header: {
				"content-type": "json"
			},
			success: (res) => {
				if (res.statusCode == 200) {
					resolve(res.data);
				} else {
					reject("出錯了");
				}

			},
			fail: (res) => {
				reject("出錯了");
			},
			complete: () => {
				if (showLoading) {
					uni.hideLoading();
				}
			}
		})
	})
)

/**
 * 超時
 */
export const getTimeOut = () => (
	new Promise((resolve, reject) =>{
		setTimeout(()=> {
			reject('請求超時');
		}, 50);
	})
)

• 引入
  在使用的頁面中引入

import {
		getParamsRequest,
		getTimeOut
	} from "../../apis/index.js"

• 使用

<template>
	<view>
		<image :src="nowPlayingList[0].images.large" />
	</view>
</template>

<script>
	import {
		getParamsRequest,
		getTimeOut
	} from "../../apis/index.js"
	export default {
		data() {
			return {
				state: 0
			};
		},
		methods: {
			/**
			 * 單次請求
			 */
			getTop250() {
				getParamsRequest("/top250", {
						apikey: "0df993c66c0c636e29ecbb5344252a4a"
					}, true)
					.then(res => {
						console.log(res);
					})
					.catch(res => {
						console.log(res);
					})
			},
			/**
			 * 順序請求
			 */
			getLastHttp() {
				getParamsRequest("/in_theaters", {
						apikey: "0b2bdeda43b5688921839c8ecb20399b"
					}, true)
					.then(res => {
						console.log(res);
						//在返回正確的情況下，執行下個接口繼續執行
						return getParamsRequest("/top250", {
							apikey: "0df993c66c0c636e29ecbb5344252a4a"
						}, true);
					})
					.then(res => {
						//第二個接口數據
						console.log(res);
					})
					.catch(res => {
						console.log(res);
					})
			},
			/**
			 * 順序執行，只需要最後一個接口數據，
			 */
			getReduceHttp() {
				[getParamsRequest("/in_theaters", {
					apikey: "0b2bdeda43b5688921839c8ecb20399b"
				}, false), getParamsRequest("/top250", {
					apikey: "0df993c66c0c636e29ecbb5344252a4a"
				}, true)]
				.reduce((prev, next) => prev.then(() => next), Promise.resolve())
					.then(res => {
						//返回的是最後一個接口數據
						console.log(res);
					}).catch(res => {
						console.log(res);
					});
			},

			/**
			 * 所有接口一起執行
			 */
			getAllHttp() {
				Promise
					.all([getParamsRequest("/top250", {
						apikey: "0df993c66c0c636e29ecbb5344252a4a"
					}, true), getParamsRequest("/in_theaters", {
						apikey: "0b2bdeda43b5688921839c8ecb20399b"
					}, true)])
					.then(res => {
						//返回的是一個數組
						console.log(res);
					}).catch(res => {
						console.log(res);
					});
			},

			/**
			 * 誰快執行誰
			 */
			getRaceHttp() {
				Promise
					.race([getParamsRequest("/top250", {
						apikey: "0df993c66c0c636e29ecbb5344252a4a"
					}, true), getParamsRequest("/in_theaters", {
						apikey: "0b2bdeda43b5688921839c8ecb20399b"
					}, true), getTimeOut()])
					.then(res => {
						console.log(res);
					}).catch(res => {
						console.log(res);
					});
			},

			/**
			 * 根據狀態取對應的接口,
			 * 方式一：
			 */
			_getClassData1(state) {
				let fnList = [getParamsRequest("/top250", {
					apikey: "0df993c66c0c636e29ecbb5344252a4a"
				}, true), getParamsRequest("/in_theaters", {
					apikey: "0b2bdeda43b5688921839c8ecb20399b"
				}, true)];
				return fnList[state];
			},
			/**
			 * 根據狀態取對應的接口,
			 * 方式二：
			 */
			_getClassData2(state) {
				let fnList = [getParamsRequest, getParamsRequest];
				return fnList[state];
			}
		},
		// 計算
		computed: {
			nowPlayingList() {
				return this.$store.state.nowPlayingList;
			}
		},


		onReady() {
			// this.$store.dispatch("getCity")

			// this.getTop250();
			// this.getLastHttp();
			// this.getReduceHttp();
			// this.getAllHttp();
			// this.getRaceHttp();
			/**
			 * 根據狀態取對應的接口,
			 * 方式一：
			 */
			/**
				this._getClassData1(1).then(res=>{
					console.log(res);
				}).catch(res=>{
					console.log(res);
				})
			*/
			/**
			 * 根據狀態取對應的接口,
			 * 方式二：
			 */
			// this._getClassData2(this.state)(this.state === 0 ? "/top250" : "/in_theaters", {
			// 	apikey: this.state === 0 ? "0df993c66c0c636e29ecbb5344252a4a" : "0b2bdeda43b5688921839c8ecb20399b"
			// }, true).then(res => {
			// 	console.log(res);
			// }).catch(res => {
			// 	console.log(res);
			// })
			this._getClassData2(this.state)(this.state === 0 ? "/top250" : "/in_theaters",
				this.state === 0 ? {
					apikey: "0df993c66c0c636e29ecbb5344252a4a"
				} : {
					apikey: "0b2bdeda43b5688921839c8ecb20399b"
				}, true).then(res => {
				console.log(res);
			}).catch(res => {
				console.log(res);
			})
		}

	}
</script>

<style lang="less">

</style>