在前端开发中，常常会涉及到异步请求数据的场景，而请求的数据可能来自于不同的域名。由于浏览器的同源策略，跨域请求被禁止，这就给前端开发带来了阻碍。本文将介绍如何使用 ES6 中的 async/await 来解决跨域问题。
什么是跨域请求
同源策略是浏览器的一项基本安全功能，它规定了两个网页间的访问权限。如果两个网页的协议、域名或端口不同，就被视为跨域请求。比如，访问 http://example.com/ 页面，页面中使用 Ajax 请求 http://api.example.com/ 的数据，就会触发跨域请求。
跨域请求会受到浏览器的限制，ajax 请求会受到跨域的限制，只能请求同源的 API 接口，而对于不同源的接口，会因安全问题受到限制，无法通过 ajax 直接请求。
解决跨域的方法
- jsonp
- cors
- postMessage
- WebSocket
- proxy 中间代理
- async/await
本文将重点介绍 async/await 解决跨域问题。
async/await 简介
ES6 中的 async/await 是一种处理异步操作的方法，它以同步的方式处理异步回调函数。使用 async/await 替代传统的回调函数和 Promise 可以大大简化异步操作。async/await 的优点：
- 代码可读性和可维护性更高
- 简化了异常处理和错误处理机制
- 省略了回调函数和 Promise 中大量的 then 链式调用
示例代码：async/await 解决跨域问题
假设我们需要从 http://www.example.com/api 接口获取数据，但是该接口存在跨域问题，无法直接 ajax 请求，我们可以使用 async/await 来解决。
第一步：包装 ajax 请求为 Promise 对象
function ajax(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
resolve(xhr.responseText)
} else {
reject(xhr.status)
}
}
}
xhr.onerror = function(e) {
reject(e)
}
xhr.send()
})
}第二步：使用 async/await
async function getData() {
try {
const res = await ajax('http://www.example.com/api')
console.log(res)
} catch(e) {
console.log(e)
}
}使用 async/await 的好处在于，可以将异步操作看做同步操作，await 会一直等待异步操作完成并返回它的结果，然后返回数据。如果有异常，可以使用 try...catch 进行处理。
注意事项
- async/await 在处理异常时必须要使用 try...catch 进行处理
- async/await 要求异步操作返回一个 Promise 对象
- async 函数返回的是一个 Promise 对象
- 异步操作中的错误必须通过 Promise.reject() 抛出，而不能使用 throw 抛出异常
总结
本文介绍了 async/await 解决跨域问题的方法，通过代码示例详细讲解了如何使用 async/await 包装 ajax 请求，并处理异步操作的返回结果。在实际开发中，我们可以使用 async/await 代替 Promise 和回调函数进行异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af2221add4f0e0ff88a27e