【AJAX】通过fetch拿到数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Asynchronous JavaScript</title>
</head>
<body>
    <h1>Asynchronous JavaScript</h1>
    <script>
    	/*
    	const second = () => {
    		setTimeout((str)=>{
    			console.log(str);
    		}, 1000, "Here is the second one");
    	}

        const first = () => {
        	console.log('First begin');
        	second();
        	console.log('The end');
        }

        first();
		*/
		
		// Callback hell

		/*
		function getRecipe () {
			const recipeID = [1, 2, 3, 4];
			setTimeout((recipeID) => {
				console.log(...recipeID);

				setTimeout((id) => {
					const recipe = {
						"title" : 'French tomato pasta',
						"publisher" : "youheng"
					};
					console.log(`${id} : ${recipe.title}`);

					setTimeout(publisher=>{
						const recipe = {
							"title": "Italian Pizza",
							"publisher" : "youheng"
						};
						console.log(`${recipe.title} : ${publisher}`);
					}, 1000, recipe.publisher);

				}, 1000, recipeID[2]);

			}, 1500, recipeID);
		}

		getRecipe();
		*/

		
		const getIDs = new Promise((resolve, reject) =>{
			setTimeout(() => {
				const ID = [1321, 2132, 5323, 6434];
				// success situation
				resolve(ID);
				// failure situation
				reject("error here");
			}, 1000);
		});

		const getRecipe = (recID) => {
			return new Promise((solve, reject) => {
				setTimeout(() => {
					const recipe = {
						"title" : "recipe menu",
						"publisher" : "youheng"
					};
					let data = {
						"id" : recID,
						"publisher" : recipe.publisher
					}
					solve(data);
				}, 1000, recID);
			});
		}

		const getRelated = publisher => {
			return new Promise((solve, reject)=>{
				setTimeout(()=>{
					const data = {
						"publisher" : publisher,
						"time" : new Date().getFullYear()
					};
					solve(data);
				}, 1000, publisher);

			});
		};

		/*
		getIDs.then((id) => {
			return getRecipe(id);
		})
		.then((data) => {
			return getRelated(data);
		})
		.then((data) => {
			console.log(data)
		})
		.catch((error)=>{
			console.log(error);
		});
		*/

		/*
		async function getRecipesAW () {
			const IDs = await getIDs;
			console.log(IDs);
			const recipe = await getRecipe(IDs);
			console.log(recipe);
			const related = await getRelated(recipe);
			console.log(related);
			return related;
		}*/

		// getRecipesAW();

		/*(async () => {
			const rec = await getRecipesAW();
			console.log("Get the result");
			console.log(rec);
		})();*/

		// getRecipesAW().then((data)=>{console.log(data);});
		
		//fetch("http://localhost:8081/https://www.metaweather.com/api/location/44418/")
		function getWeather(woeid) {
			fetch(`http://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/${woeid}/`)
			.then((data) => {
				console.log(data);
				return data.json();
			})
			.then((result) => {
				const location = result.title;
				const weather_today = result.consolidated_weather[0];
				console.log(`Temperature in ${location} stay between ${weather_today.min_temp} and ${weather_today.max_temp}`);

			})
			.catch((error) => {
				console.log(error);
			});
		}

		async function getWeatherAW (woeid) {
			try {
				const result = await fetch(`http://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/${woeid}/`);
				const data = await result.json();
				const location = await data.title;
					const weather_today = await data.consolidated_weather[0];
				console.log(`AW : Temperature in ${location} stay between ${weather_today.min_temp} and ${weather_today.max_temp}`);
				return data;
			} catch (e) {
				console.log(e);
			}
		}

		let dataLondon;

		getWeatherAW(44418)
		.then((data) => {
			dataLondon = data;
			console.log(dataLondon);
		});


    </script>
</body>
</html>
来源：CSDN
作者：HNU_软2_chx
链接：https://blog.csdn.net/chenhanxuan1999/article/details/104460276
标签
ajax