javascript - 确保先拿到上一个script 引入js get请求的结果，再走下一个js 文件中的内容，应该怎么修改呢？

Question

如图所示在html页面，通过script标签引入的publickKey文件
这里面需要发送get请求，请求服务器上一份加密key,然后在引入的其他js文件中使用
所以我需要确保 先拿到get请求的结果，再走下一个js 文件中的内容
publickKey.js 中用了 asynac await 但是还是先执行了下面的js 文件，导致没有拿到key ,
现在需要先拿到get请求的结果，再走下一个js 文件中的内容，应该怎么修改呢？

async function a(){    const res = await request}

Answer 1

你应该先理解浏览器加载 JS 的机制，然后再设计你的逻辑。比如，使用 <script> 标签加载的话，如果没有 async、defer 那么它们就是顺序加载。而 Promise 不会影响下一个 JS 的加载和执行。

所以你的需求有两种做法：

1. 在下一步的函数里验证开关，即 public key 是否已经加载
2. 等待 public key 加载完毕，再加载后面的 JS

Answer 2

要确保先拿到上一个 script 引入的 js get 请求的结果，再走下一个 js 文件中的内容，你可以使用 Promise 和 async/await 来实现。

首先，你需要将 get 请求封装成一个返回 Promise 的函数。这样，你可以在异步函数中使用 await 关键字来等待 get 请求完成。

下面是一个示例代码：

// 假设这是你的 get 请求函数function fetchPublicKey() {  return new Promise((resolve, reject) => {    // 在这里发送 get 请求，并处理响应    // 假设你的请求发送和响应处理逻辑是这样的：    fetch('https://example.com/publicKey')      .then(response => response.json())      .then(data => {        // 将获取到的数据解析为 publicKey        const publicKey = data.publicKey;        resolve(publicKey); // 解析成功后调用 resolve()      })      .catch(error => {        reject(error); // 请求失败时调用 reject()      });  });}

接下来，在需要使用 get 请求的异步函数中，你可以调用 fetchPublicKey() 函数并使用 await 关键字等待结果。

示例如下：

async function a() {  try {    const publicKey = await fetchPublicKey(); // 等待 get 请求完成并获取结果    // 在这里使用 publicKey，例如：    console.log(publicKey);  } catch (error) {    // 处理 get 请求失败的情况    console.error('Failed to fetch public key:', error);  }}

通过这种方式，你可以确保先获取到 get 请求的结果，然后再执行下一个 js 文件中的内容。