在前端开发中，我们经常需要从后台服务器获取数据，以便在页面中展示或者进行其他操作。而在现代的 Web 开发中，API 是非常常见的数据传输方式。而在 ES7 中，引入了 async/await 这一新特性，可以更加方便地处理异步请求。同时，为了避免跨域请求的安全问题，我们还需要使用 CORS。
什么是 async/await
async/await 是 ES7 中的一个新特性，它使得异步请求的处理更加简单易懂。在以前，我们经常使用回调函数或者 Promise 来处理异步请求，但是这种方式会使得代码变得混乱不堪，难以维护。而 async/await 可以将异步请求的处理变得更加优雅。
async/await 的使用非常简单，我们只需要在异步函数前加上 async 关键字，就可以在其中使用 await 关键字来等待异步请求的返回结果。例如：
async function getData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}在上面的代码中，我们定义了一个 async 函数 getData，其中使用了 fetch 来发送异步请求，并且使用 await 等待请求的返回结果。这样，当我们调用 getData 函数时，它会返回一个 Promise，我们可以使用 then 方法来获取请求的结果。
什么是 CORS
CORS（Cross-Origin Resource Sharing）是一种跨域资源共享的机制。在浏览器中，由于安全原因，不允许跨域请求资源。而使用 CORS 可以使得浏览器允许跨域请求，从而实现在前端页面中获取来自不同域名的数据。
CORS 的实现方式有多种，其中最常见的方式是在服务器端设置响应头。例如，在 Express 中，我们可以使用 cors 中间件来设置 CORS 响应头，从而允许跨域请求：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// other routes here在上面的代码中，我们使用了 Express 的 cors 中间件来设置 CORS 响应头。这样，当浏览器发送跨域请求时，服务器会返回一个带有 Access-Control-Allow-Origin 头的响应，从而使得浏览器允许跨域请求。
使用 async/await 和 CORS 处理 API 请求
在前端开发中，我们通常需要从后台服务器获取数据以便在页面中展示。而使用 async/await 和 CORS 可以使得处理 API 请求变得更加简单易懂。下面是一个使用 async/await 和 CORS 处理 API 请求的示例代码：
async function getData() {
try {
const response = await fetch('https://example.com/data', {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
});
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}在上面的代码中，我们定义了一个 async 函数 getData，其中使用了 fetch 来发送异步请求，并且使用 await 等待请求的返回结果。同时，我们设置了 mode: 'cors'，表示允许跨域请求。在响应返回后，我们首先检查响应的状态码，如果不是 200，则抛出一个错误。最后，我们使用 await 等待请求的返回结果，并返回数据。
总结
在本文中，我们介绍了 async/await 和 CORS 这两个常见的前端技术。使用 async/await 可以使得异步请求的处理变得更加优雅，而使用 CORS 则可以避免跨域请求的安全问题。我们还给出了一个使用 async/await 和 CORS 处理 API 请求的示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658f452feb4cecbf2d4ef1e5