8个你可能不了解但很实用的Web API

八个实用Web API介绍

Web API是指可以让开发者访问Web服务器的接口，使用Web API可以方便地获取到Web服务器中的数据。本篇文章将介绍八个实用的Web API。

1、IndexedDB API

IndexedDB是一种本地数据库，在浏览器中可以存储大量数据。与Web SQL不同，IndexedDB更加普及，兼容性好。下面是一个建立IndexedDB的例子：

	var request=indexedDB.open('mydb',1);
	var db;

	request.onsuccess=function(event) {
		db=event.target.result;
	};

	request.onerror=function(event) {
	    console.log("Database error: " + event.target.errorCode);
	};

	request.onupgradeneeded=function(event) {
		db=event.target.result;
		var objectStore=db.createObjectStore("person", {keyPath: "id"});
		objectStore.createIndex("name", "name", {unique: false});
		objectStore.createIndex("email", "email", {unique: true});
	};

2、Geolocation API

Geolocation API可以获取当前设备的地理信息，包括纬度、经度等。下面是一个获取地理位置的例子：

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			var lat=position.coords.latitude;
			var lng=position.coords.longitude;
			console.log("Latitude: " + lat + " Longitude: " + lng);
		}, function() {
			console.log("Geolocation failed!");
		});
	} else {
		console.log("Geolocation not supported!");
	}

3、Canvas API

Canvas API允许您在浏览器中绘制图形。下面是一个将图形画在画布上的例子：

	var canvas=document.getElementById('myCanvas');
	var context=canvas.getContext('2d');

	context.fillStyle='blue';
	context.fillRect(10, 10, 100, 100);

4、Web Audio API

Web Audio API允许您在浏览器中处理和控制音频。下面是一个在浏览器中播放音频的例子：

	var context=new (window.AudioContext || window.webkitAudioContext)();
	var source=context.createBufferSource();

	var request=new XMLHttpRequest();
	request.open('GET', 'audio.mp3', true);
	request.responseType='arraybuffer';
	request.onload=function() {
	    context.decodeAudioData(request.response, function(buffer) {
	        source.buffer=buffer;
	        source.connect(context.destination);
	        source.start();
	    }, function() {
	    	console.log('Error decoding audio');
	    });
	};
	request.send();

5、Web Speech API

Web Speech API允许您在浏览器中使用语音识别和语音合成。下面是一个语音识别的例子：

	var recognition=new (window.webkitSpeechRecognition || window.SpeechRecognition)();
	recognition.lang='en-US';
	recognition.onresult=function(event) {
		console.log(event.results[0][0].transcript);
	};
	recognition.start();

6、WebGL API

WebGL API是一种使用JavaScript和OpenGL ES 2.0在浏览器中绘制3D图形的技术。下面是一个在画布上绘制3D图形的例子：

	var canvas=document.getElementById('myCanvas');
	var gl=canvas.getContext('webgl');

	var vertices=[
	    0.0,  1.0,  0.0,
	   -1.0, -1.0,  0.0,
	    1.0, -1.0,  0.0
	];

	var buffer=gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

	var vertexShaderSource='attribute vec4 a_position; void main() { gl_Position=a_position; }';
	var fragmentShaderSource='void main() { gl_FragColor=vec4(1.0, 0.0, 0.0, 1.0); }';

	var vertexShader=gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vertexShader, vertexShaderSource);
	gl.compileShader(vertexShader);

	var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fragmentShader, fragmentShaderSource);
	gl.compileShader(fragmentShader);

	var program=gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);

	gl.useProgram(program);
	gl.enableVertexAttribArray(0);
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
	gl.drawArrays(gl.TRIANGLES, 0, 3);

7、Notifications API

Notifications API允许您在浏览器中发送桌面通知。下面是一个发送桌面通知的例子：

	if (Notification.permission !=="granted")
		Notification.requestPermission();

	var notification=new Notification('Hello World!',{
		body: 'This is a test notification.'
	});

	notification.onclick=function() {
		window.open('https://www.example.com');
	};

8、Fetch API

Fetch API可以替代XMLHttpRequest，方便地进行网络请求。下面是一个发送GET请求的例子：

	fetch('https://api.example.com/data')
		.then(function(response) {
			return response.json();
		})
		.then(function(data) {
			console.log(data);
		})
		.catch(function(error) {
			console.log(error);
		});

以上是八个实用的Web API的介绍与代码示例，它们可以帮助开发者更好地利用浏览器提供的资源，方便地获取数据和进行各种操作。