Axios 是一个基于 Promise 的 JavaScript HTTP 客户端，可在前端应用程序和 Node.js 后端中使用。

Axios

在axios中取消或中止一个Ajax请求，可以使用Axios提供的`CancelToken`。`CancelToken`可以让你主动取消Ajax请求。以下是使用`CancelToken`的步骤及例子：

### 使用 CancelToken 步骤：

1. **创建 cancel token：** 使用`axios.CancelToken`工厂函数创建一个取消token。

2. **传递 cancel token 到请求配置：** 在发起请求时，将这个cancel token作为请求配置的参数传递给axios。

3. **取消请求：** 使用创建token时得到的取消函数（`cancel`）来取消请求。

### 示例代码：

```javascript
import axios from 'axios';

// 第1步：创建cancel token
const CancelToken = axios.CancelToken;
let cancel;

// 第2步：发起请求，并传递cancel token
axios.get('/some/path', {
  cancelToken: new CancelToken(function executor(c) {
    // 这个executor函数接收一个取消函数作为参数
    cancel = c;
  })
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  } else {
    // 处理其他错误
  }
});

// 第3步：取消请求
// 当需要取消请求时，调用cancel函数
cancel('Operation canceled by the user.');
```

在这个例子中，我们创建了一个cancel token，并在发起请求时将它传递给了`axios.get`。当我们执行`cancel`函数时，如果请求还没有完成，它将会被取消，`catch`代码块会捕获到一个`axios.Cancel`类型的错误。

### 另一种方式：使用 CancelToken.source 工厂方法

另一种创建cancel token的方式是使用`CancelToken.source`方法：

```javascript
import axios from 'axios';

// 创建cancel token source
const source = axios.CancelToken.source();

// 发起请求，并传递cancel token
axios.get('/some/path', {
  cancelToken: source.token
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');
```

在这个例子中，我们使用`CancelToken.source`创建了一个对象，它包含了一个`token`用于请求配置，以及一个`cancel`方法用于取消请求。这种方法更为简洁且易于理解。

### 注意：

- 取消请求是一种不常见的操作，通常用在即将离开页面或者组件卸载时取消未完成的请求，以避免不必要的资源浪费。
- 在取消请求后，Axios会抛出一个错误。你需要在`catch`代码块中通过`axios.isCancel`函数来判断这个错误是否为一个取消请求的错误，以便正确处理。

How to cancel/abort ajax request in axios

当您使用 Axios 进行 HTTPS 请求时，如果您的目标服务器使用的是自签名证书，或者您需要对证书进行特殊的配置，您可能需要配置 SSL 证书。在 Node.js 环境中，您可以使用 Axios 的 `httpsAgent` 配置项来指定 SSL 证书相关的配置。

以下是一个如何配置 Axios 使用 SSL 证书的步骤和示例：

1. **引入依赖**：首先，确保您已经安装了 `axios` 和 `https` 模块。
```javascript
const axios = require('axios');
const https = require('https');
const fs = require('fs');
```

2. **读取 SSL 证书文件**：使用 Node.js 的 `fs` 模块来读取您的 SSL 证书文件，包括证书文件(`.crt`)、私钥文件(`.key`)以及证书链（如果有的话）。
```javascript
const certificate = fs.readFileSync('path/to/certificate.crt', 'utf8');
const privateKey = fs.readFileSync('path/to/private.key', 'utf8');
const ca = fs.readFileSync('path/to/ca.pem', 'utf8'); // 只有在需要证书链时才要添加
```

3. **创建 HTTPS Agent**：使用读取到的证书信息创建一个 `https.Agent` 实例，并且配置相应的 SSL 选项。
```javascript
const httpsAgent = new https.Agent({
  rejectUnauthorized: false, // 如果是自签名证书，需要设置这个选项为 false
  cert: certificate, // 证书文件
  key: privateKey, // 私钥文件
  ca: ca, // 如果有证书链，需要添加这个选项
});
```

4. **在 Axios 请求中使用 HTTPS Agent**： 在发送请求时，通过 `httpsAgent` 配置项传入创建好的 HTTPS Agent。
```javascript
axios.get('https://your-secure-domain.com/api/data', { httpsAgent })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log('Error', error.message);
  });
```

请注意，如果您将 `rejectUnauthorized` 设置为 `false`，Axios 将接受任何 SSL 证书，无论它是否有效或受信任。这在生产环境中是不安全的，因为它使您的应用容易受到中间人攻击。**您应该只在开发或测试环境中这样做**，并且确保在生产环境中始终验证 SSL 证书的有效性。如果您的证书是由信任的 CA 签发的，那么通常不需要修改 `rejectUnauthorized` 这个默认选项。

以上就是配置 Axios 使用 SSL 证书的步骤，通过正确配置这些选项，您可以确保您的 HTTP 客户端与服务器之间的通信是安全的。

How to configure axios to use SSL certificate?

在使用`axios`进行文件上传时，追踪上传进度可以通过配置请求时的`onUploadProgress`属性来实现。`onUploadProgress`是一个在上传过程中可以被调用的函数，它可以接收一个`ProgressEvent`作为参数，从而让我们能够获取相关的进度信息。下面是一个使用`axios`追踪上传进度的示例：

```javascript
const axios = require('axios');

// 你需要上传的文件数据
const file = /* 获取文件数据，例如 document.getElementById('file').files[0] */;

// 创建一个 FormData 对象并添加文件
const formData = new FormData();
formData.append('file', file);

// 发起 POST 请求上传文件
axios({
  method: 'post',
  url: '/upload', // 你的上传 URL
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: function(progressEvent) {
    // 计算上传进度
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    // 打印或处理上传进度
    console.log(`上传进度：${percentCompleted}%`);
    // 例如，你可以在这里更新一个进度条的状态
  }
})
.then(response => {
  // 处理响应数据
  console.log('文件上传成功', response);
})
.catch(error => {
  // 处理错误情况
  console.error('文件上传失败', error);
});
```

在这个例子中，我首先引入了`axios`模块，然后准备了要上传的文件数据并将其添加到`FormData`对象中。在发起`axios`请求时，我设置了请求的`method`为`post`，`url`为上传接口的地址，同时传入了`formData`作为请求的`data`。

在请求的配置对象中，我定义了`onUploadProgress`函数。这个函数会接收到一个`ProgressEvent`对象，我们可以通过这个对象的`loaded`属性和`total`属性来计算当前的上传进度百分比。这个进度信息可以用来更新UI，例如进度条，或者仅仅在控制台中打印出来。

最后，通过`then`处理了成功的响应，通过`catch`捕获并处理了可能发生的错误。这个流程是异步的，所以UI的更新应该在`onUploadProgress`函数中进行，以保证用户可以实时看到上传进度。

How to get onUploadProgress in axios?

当使用Axios进行HTTP请求时，如果遇到5xx错误（即服务器错误），可以通过几种不同的方式来实现自动重试。

### 1. 使用axios-retry库

`axios-retry`是一个非常流行的库，它可以很容易地通过Axios来实现请求的自动重试。首先，您需要安装这个库：

```bash
npm install axios-retry
```

然后，在您的代码中引入并设置重试策略，例如：

```javascript
const axios = require('axios');
const axiosRetry = require('axios-retry');

// 创建Axios实例
const axiosInstance = axios.create({
 // 配置...
});

// 安装axios-retry插件，配置自动重试
axiosRetry(axiosInstance, {
 retries: 3, // 设置重试次数
 retryCondition: (error) => {
 // 只对5xx的服务器错误进行重试
 return error.response && error.response.status >= 500;
 },
 retryDelay: (retryCount) => {
 // 重试间隔时间的计算，这里使用了指数退避策略
 return axiosRetry.exponentialDelay(retryCount);
 }
});

// 之后使用axiosInstance进行请求
axiosInstance.get('https://example.com/api')
 .then(response => {
 // 处理response
 })
 .catch(error => {
 // 处理error
 });
```

### 2. Axios的拦截器

可以使用Axios的拦截器(interceptors)功能来实现重试逻辑。拦截器允许我们在请求或响应被处理之前对它们进行拦截并执行代码。

```javascript
const axios = require('axios');

// 设置重试次数的计数器
const MAX_RETRIES = 5;
let retries = 0;

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
 if (err.response && err.response.status >= 500 && retries < MAX_RETRIES) {
 retries += 1; // 增加重试计数
 return axios(err.config); // 重新发起请求
 }
 return Promise.reject(err); // 如果不满足重试条件，则返回错误
});

// 使用axios请求
axios.get('https://example.com/api')
 .then(response => {
 // 处理response
 })
 .catch(error => {
 // 处理error
 });
```

### 3. 手动重试

最后，我们还可以手动实现重试逻辑。例如，可以创建一个函数，该函数封装了Axios请求，并在捕获到5xx错误时进行递归调用重试。

```javascript
const axios = require('axios');

function requestWithRetry(url, retries = 5) {
 return axios.get(url)
 .then(response => response)
 .catch(error => {
 if (error.response && error.response.status >= 500 && retries > 0) {
 // 等待一段时间后重试
 return new Promise(resolve => {
 setTimeout(() => resolve(requestWithRetry(url, retries - 1)), 1000);
 });
 }
 // 如果重试次数用完或其他错误就正式抛出错误
 throw error;
 });
}

// 使用函数请求
requestWithRetry('https://example.com/api')
 .then(response => {
 // 处理response
 })
 .catch(error => {
 // 处理error
 });
```

在上面的例子中，`requestWithRetry`函数尝试发起GET请求，如果响应是5xx错误，并且没有达到重试次数上限，它将等待1秒钟然后重试请求。重试间隔和次数可以根据实际场景调整。

请注意，对服务器请求的频繁重试可能会导致服务器负载过重，因此在实施重试策略时应当谨慎，并考虑适当的退避策略（如上面例子中的指数退避）。此外，确保对网络不稳定或服务器确实需要时间恢复的情况有所区分。

How to retry 5xx requests using axios

首先，`axios` 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。在 ExpressJS 应用中使用 `axios` 可以让我们轻松地从服务器端发起 HTTP 请求到其他的 web 服务。以下是使用 `axios` 的一般步骤：

1. **安装 `axios` 包**：
   在你的 ExpressJS 项目中，你需要通过 npm 或 yarn 来安装 `axios`。这可以通过运行以下命令来完成：

   ```shell
   npm install axios
   ```

   或者

   ```shell
   yarn add axios
   ```

2. **在 ExpressJS 应用中引入 `axios`**：
   安装完成后，你可以在你的 ExpressJS 应用文件中通过 `require` 引入 `axios`：

   ```javascript
   const axios = require('axios');
   ```

3. **使用 `axios` 发起 HTTP 请求**：
   你可以使用 `axios` 发起 GET、POST、PUT、DELETE 等 HTTP 请求。以下是一个使用 `axios` 在 ExpressJS 中发起 GET 请求的例子：

   ```javascript
   app.get('/external-api-data', async (req, res) => {
     try {
       const response = await axios.get('https://api.external-service.com/data');
       res.json(response.data);
     } catch (error) {
       res.status(500).send(error.message);
     }
   });
   ```

   在这个例子中，当客户端请求你的服务器上的 `/external-api-data` 路径时，你的 ExpressJS 应用将会使用 `axios` 向 `https://api.external-service.com/data` 发起一个 GET 请求。然后将得到的数据作为 JSON 响应发送回客户端，或者在出现错误时发送一个错误消息。

4. **处理请求和响应**：
   `axios` 允许你处理请求的响应以及捕捉可能发生的任何错误。你可以通过 `then` 和 `catch` 方法来处理这些，或者使用 `async/await` 语法来编写更加清晰的异步代码，正如上面的例子所示。

   捕捉错误是非常重要的，因为它能够让你的应用更加健壮。你可以在 `catch` 块内处理错误，并决定如何响应客户端，比如返回一个错误状态码和消息。

5. **配置请求**：
   `axios` 允许你配置请求，例如设置请求头、查询参数、超时以及其他设置。例如，如果你需要发送一个带有认证令牌的请求，你可以这样做：

   ```javascript
   const response = await axios.get('https://api.external-service.com/secure-data', {
     headers: {
       'Authorization': `Bearer ${yourAuthToken}`
     }
   });
   ```

6. **拦截器**：
   `axios` 提供了拦截器，让你能够在请求或响应被处理之前进行拦截，这对于添加日志、处理错误等场景非常有用。

   ```javascript
   // 添加请求拦截器
   axios.interceptors.request.use(function (config) {
       // 在发送请求之前做些什么
       return config;
     }, function (error) {
       // 对请求错误做些什么
       return Promise.reject(error);
     });

   // 添加响应拦截器
   axios.interceptors.response.use(function (response) {
       // 对响应数据做点什么
       return response;
     }, function (error) {
       // 对响应错误做点什么
       return Promise.reject(error);
     });
   ```

这些就是在 ExpressJS 应用中使用 `axios` 的基本步骤。通过 `axios`，你的应用能够与外部服务进行高效、灵活的交互。

How do I use axios within ExpressJS?

当您需要在 JavaScript 应用程序中进行 HTTPS 调用时，`axios` 是一个流行的 HTTP 客户端库，可以很容易地在浏览器和 Node.js 环境中使用。以下是使用 `axios` 进行 HTTPS 调用的步骤和示例。

### 引入 Axios

在您的项目中，首先需要安装并引入 `axios`。如果您使用的是 Node.js，可以使用以下命令安装：

```bash
npm install axios
```

然后在您的代码中引入它：

```javascript
const axios = require('axios');
```

如果您在浏览器中使用 `axios`，可以通过 `<script>` 标签直接引入：

```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

### 发起 HTTPS 调用

使用 `axios`，您可以很容易地发起 GET、POST、PUT、DELETE 等 HTTP 请求。以下是一个发起 HTTPS GET 请求的简单例子：

```javascript
axios.get('https://api.example.com/data')
 .then(response => {
 // 请求成功处理
 console.log(response.data);
 })
 .catch(error => {
 // 请求失败处理
 console.error('Error fetching data: ', error);
 });
```

以下是一个发起 HTTPS POST 请求的例子，包括在请求体中发送数据：

```javascript
const postData = {
 userId: 1,
 title: 'Sample Post',
 body: 'This is a sample post.'
};

axios.post('https://api.example.com/posts', postData)
 .then(response => {
 // 请求成功处理
 console.log('Post created: ', response.data);
 })
 .catch(error => {
 // 请求失败处理
 console.error('Error creating post: ', error);
 });
```

### 处理 HTTPS 请求参数

您可以通过将参数对象传递给 `params` 属性，以在 GET 请求中包含查询参数：

```javascript
axios.get('https://api.example.com/data', {
 params: {
 userId: 123
 }
})
.then(response => {
 console.log(response.data);
})
.catch(error => {
 console.error('Error fetching data: ', error);
});
```

### 设置请求头

有时您可能需要设置特定的 HTTP 头部，例如，当发送认证信息或设置内容类型时。以下是如何在 `axios` 请求中设置 HTTP 头部的示例：

```javascript
axios.get('https://api.example.com/data', {
 headers: {
 'Authorization': 'Bearer YOUR_TOKEN',
 'Content-Type': 'application/json'
 }
})
.then(response => {
 console.log(response.data);
})
.catch(error => {
 console.error('Error with response: ', error.response);
});
```

### 使用 Axios 实例

您还可以创建一个 `axios` 实例，为一系列请求配置通用的设置，如基础 URL、头部、超时等。

```javascript
const apiClient = axios.create({
 baseURL: 'https://api.example.com',
 timeout: 1000,
 headers: {'X-Custom-Header': 'foobar'}
});

apiClient.get('/data')
 .then(response => {
 console.log(response.data);
 })
 .catch(error => {
 console.error('Error with response: ', error.response);
 });
```

通过这些步骤和示例，您可以看到 `axios` 提供了一种简洁且功能强大的方式来发起 HTTPS 调用，并且它支持各种请求和配置选项。

How to use axios to make an https call?

当您需要同时发起多个 Axios 请求时，可以使用 `axios.all()` 方法结合 `axios.spread()`。`axios.all()` 允许您并行执行多个请求，而 `axios.spread()` 可以让您处理这些请求的响应。

以下是一个例子，展示了如何同时发起两个请求：

```javascript
import axios from 'axios';

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

// 使用axios.all并行地发出两个请求
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 当两个请求都完成时，这个回调函数会被执行
    // acct 和 perms 分别是两个请求的响应
    console.log('User Account', acct.data);
    console.log('User Permissions', perms.data);
  }))
  .catch(error => {
    console.error('An error occurred:', error);
  });
```

在上面的代码中，`getUserAccount` 和 `getUserPermissions` 函数分别发出了两个 HTTP GET 请求。使用 `axios.all()` 将这两个请求组合在一起，它们会并行执行。当所有请求都完成时，`axios.spread()` 回调函数被调用，并接收每一个响应作为参数。

自从 ES6 引入了 Promise，我们也可以使用 `Promise.all` 来实现类似的功能，示例代码如下：

```javascript
Promise.all([getUserAccount(), getUserPermissions()])
  .then(([acct, perms]) => {
    // 当两个请求都成功完成时，这个回调函数会被执行
    console.log('User Account', acct.data);
    console.log('User Permissions', perms.data);
  })
  .catch(error => {
    // 如果任何请求失败，这个回调函数会被执行
    console.error('An error occurred:', error);
  });
```

这里使用了 `Promise.all()` 来等待所有给定的 Promise 对象都成功完成。如果所有请求都成功，它们的响应会作为一个数组传递给 `.then()` 方法的回调函数；否则，如果任何一个请求失败，`.catch()` 方法会捕获到失败的原因。这种方式具有更好的兼容性，并且在现代 JavaScript 开发中更加常见。

How to post multiple Axios requests at the same time?

在使用Axios进行API请求时，你可能希望对所有请求进行记录，以便进行调试、监控或审计。Axios提供了拦截器（interceptors），这是一种实现统一记录请求调用的非常有效的方式。拦截器允许我们在请求发送到服务器之前和从服务器收到响应之后，但在我们的代码处理响应之前，对它们进行处理。

以下是一个使用Axios拦截器来记录所有请求调用的示例：

```javascript
import axios from 'axios';

// 创建一个记录函数，用于输出请求和响应信息
const logRequestResponse = (url, method, data, response) => {
  console.log(`[Request] ${method.toUpperCase()} ${url}`, data);
  console.log(`[Response]`, response);
};

// 创建Axios实例
const api = axios.create({
  baseURL: 'https://your.api/baseurl' // 假设的API基础URL
});

// 添加请求拦截器
api.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    // 比如可以在这里添加认证Token到headers
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
api.interceptors.response.use(
  response => {
    // 任何位于2xx范围内的状态码都会触发该函数
    // 对响应数据做些事情
    logRequestResponse(response.config.url, response.config.method, response.config.data, response.data);
    return response;
  },
  error => {
    // 任何超出2xx范围的状态码都会触发该函数
    // 对响应错误做些事情
    if (error.response) {
      // 服务器返回了不在2xx的响应
      logRequestResponse(error.response.config.url, error.response.config.method, error.response.config.data, error.response.data);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error(`[Axios Error] No response:`, error.request);
    } else {
      // 发送请求时出了点问题
      console.error(`[Axios Error] General error:`, error.message);
    }
    return Promise.reject(error);
  }
);

// 使用api实例进行请求
api.get('/some-endpoint')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
```

在上面的代码示例中，我们首先定义了一个`logRequestResponse`函数，它会将请求的URL、方法、数据和响应记录到控制台。然后，我们创建了一个Axios实例并对其添加了请求和响应拦截器。在请求拦截器中，我们暂时没有做太多处理，只是将配置返回，实际情况下可以在这里添加身份验证token或者日志记录等。在响应拦截器中，我们调用`logRequestResponse`函数来记录请求和响应的详细信息。如果请求成功，我们记录响应数据；如果请求失败，我们根据错误的类型来记录不同的信息。

通过上述方法，所有通过这个Axios实例发出的请求都会被记录，这为我们提供了一个强大的工具来跟踪API的调用情况。

做到这一点的最好方法是拦截器。每个拦截器在请求/响应之前被调用。在这种情况下，日志拦截器就是。

    axios.interceptors.request.use(request => {
      console.log('Starting Request', JSON.stringify(request, null, 2))
      return request
    })
    
    axios.interceptors.response.use(response => {
      console.log('Response:', JSON.stringify(response, null, 2))
      return response
    })
    

或类似的东西。

很高兴您使用 axios 的新实例：

    const api = axios.create({
      timeout: 1000
    })
    

这样你就可以打电话

    api.interceptors[...]

使用[`axios-debug-log`](https://www.npmjs.com/package/axios-debug-log)
--------------------------------------------------------------------

1.  `npm install --save axios-debug-log`
2.  `require('axios-debug-log')`在任何 axios 调用之前
3.  设置环境变量`DEBUG=axios`

默认情况下，您将看到如下日志：

      axios POST /api/auth/login +0ms
      axios 200  (POST http://localhost:8080/api/auth/login) +125ms
      axios POST /api/foo +0ms
      axios 200  (POST http://localhost:8080/api/foo) +15ms
    

请参阅[文档](https://www.npmjs.com/package/axios-debug-log)了解配置和自定义选项。

看起来您可以使用“拦截器”拦截所有请求，并登录其中： https: [//github.com/mzabriskie/axios#interceptors](https://github.com/mzabriskie/axios#interceptors)

**使用[axios-logger](https://www.npmjs.com/package/axios-logger)**

当你在nodejs中发送请求时，需要将日志显示到控制台。

您可以尝试将`axios.request`函数包装在 Promise 中。

    function loggedRequest(config) {
      return new Promise((resolve, reject) => {
        axios.request(config)
        .then((res) => {
          // log success, config, res here
          resolve(res);      
        })
        .catch(err => {
          // same, log whatever you want here
          reject(err);
        })
      })
    }

How to log all axios calls from one place in code

当我们谈论跨域资源共享（CORS）问题时，我们指的是一种安全机制，该机制允许或限制在一个域中运行的Web应用程序获取另一个域上托管的资源。默认情况下，浏览器禁止从脚本内发起的跨源HTTP请求，这是一项称为同源策略的安全措施。

在使用Axios时，如果遇到CORS问题，通常意味着尝试从客户端（例如在浏览器中运行的JavaScript代码）访问不同域的服务时遇到了跨域请求限制。处理这一问题的方法有以下几种：

### 1. 服务器端设置CORS头

最常见和推荐的方法是在服务器端配置CORS。服务器必须在响应中包含适当的CORS头，如`Access-Control-Allow-Origin`。这样，服务器就可以明确允许特定的域进行跨域请求。

#### 示例：

假设你的客户端代码运行在`http://client.example.com`，而你试图通过Axios向`http://api.example.com/data`发送请求。服务器端需要在响应中包含以下头信息：

```http
Access-Control-Allow-Origin: http://client.example.com
```

或者，如果你想允许任何域对服务器资源的访问，可以设置：

```http
Access-Control-Allow-Origin: *
```

### 2. JSONP

对于旧的服务器或当你没有权限更改服务器配置时，可以使用JSONP（JSON with Padding）来绕过CORS限制。不过，请注意，JSONP只支持`GET`请求，并且不是一种安全的解决方案，因为它容易受到XSS攻击。Axios本身不支持JSONP，因此，你可能需要使用其他库。

### 3. 代理服务器

另一个解决方式是使用代理服务器。你可以设置一个代理服务器，所有的客户端请求先发到这个代理服务器，由代理服务器转发请求到目标服务器，并将响应返回给客户端。这样，因为所有请求都是通过同一个域发起的，CORS问题就不存在了。

在开发环境中，像webpack-dev-server等工具通常提供了代理功能。

#### 示例：

```javascript
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
      },
    },
  },
};
```

通过以上任一方式，都可以在使用Axios时解决CORS问题。然而，在生产环境中推荐的做法仍然是通过服务器端设置CORS头，因为这是最为直接和安全的方式。

您的服务器应该启用跨源请求，而不是客户端。为此，您可以检查[这个漂亮的页面](https://enable-cors.org/server.html)，其中包含多个平台的实现和配置

只是为那些可能通过谷歌搜索到达这里的人指出我的解决方案。我通过在调用中`withCredentials`设置为解决了 CORS 问题（当从浏览器中的 UI 调用外部 api 时）：`false``axios`

    axios({
        method: 'get',
        url: `https://api.someurl.com/subject/v2/resource/somevalue`,
        withCredentials: false,
        params: {
          access_token: SECRET_TOKEN,
        },
      });
    

在这种情况下，外部 api 端点的安全性基于`access_token`.

**可能对某人有帮助：**

我正在将数据从`react`应用程序发送到`golang`服务器。

一旦我改变了这个，`w.Header().Set("Access-Control-Allow-Origin", "*")`错误就被修复了。

**反应表单提交功能：**

    async handleSubmit(e) {
        e.preventDefault();
        
        const headers = {
            'Content-Type': 'text/plain'
        };
    
        await axios.post(
            'http://localhost:3001/login',
            {
                user_name: this.state.user_name,
                password: this.state.password,
            },
            {headers}
            ).then(response => {
                console.log("Success ========>", response);
            })
            .catch(error => {
                console.log("Error ========>", error);
            }
        )
    }
    

**Go 服务器有 Router，**

    func main()  {
        router := mux.NewRouter()
    
        router.HandleFunc("/login", Login.Login).Methods("POST")
    
        log.Fatal(http.ListenAndServe(":3001", router))
    }
    

**登录.go,**

    func Login(w http.ResponseWriter, r *http.Request)  {
    
        var user = Models.User{}
        data, err := ioutil.ReadAll(r.Body)
    
        if err == nil {
            err := json.Unmarshal(data, &user)
            if err == nil {
                user = Postgres.GetUser(user.UserName, user.Password)
                w.Header().Set("Access-Control-Allow-Origin", "*")
                json.NewEncoder(w).Encode(user)
            }
        }
    }

我遇到了同样的问题。当我更改内容类型时，它已经解决了。我不确定这个解决方案对您有帮助，但也许是。如果您不介意内容类型，它对我有用。

    axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';

我在处理 Vue.js 项目时遇到了相同的 CORS 错误。您可以通过构建代理服务器来解决此问题，或者另一种方法是禁用浏览器（例如 CHROME）的安全设置来访问跨源 api（这是临时解决方案，不是解决问题的最佳方法）。这两种解决方案都对我有用。后面的解决方案不需要构建任何模拟服务器或代理服务器。这两种方案都可以在前端解决。

您可以通过在终端上键入以下命令来禁用从源访问 api 的 chrome 安全设置：

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security
    

在终端上运行上述命令后，将打开一个禁用安全设置的新 chrome 窗口。现在，再次运行您的程序 (npm runserve / npm run dev)，这次您将不会收到任何 CORS 错误，并且能够使用 axios 获取请求。

希望这可以帮助！

How to having cors issue in axios

Axios 拦截器允许我们在请求或响应被 `then` 或者 `catch` 处理之前对它们进行拦截和修改。拦截器通常用于以下几个目的：

1. 在请求发送到服务器之前对请求数据进行修改。
2. 发送请求前，在请求头中附加认证信息（如JWT令牌）。
3. 在请求到达服务器之前取消请求。
4. 统一处理所有的响应错误。
5. 在响应数据到达应用逻辑之前对数据进行转换。

使用 Axios 拦截器主要有两种类型：请求拦截器和响应拦截器。

### 添加请求拦截器

请求拦截器会在请求真正发送出去之前执行。以下是添加请求拦截器的一般方法：

```javascript
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如设置token
    config.headers.Authorization = `Bearer ${YOUR_AUTH_TOKEN}`;

    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
```

在这里，我们首先使用 `axios.interceptors.request.use` 添加了一个请求拦截器。这个拦截器接收两个函数作为参数，第一个函数会在请求发出前被调用，并接收请求的配置对象 `config` 作为参数，允许我们修改这个配置对象。在上面的例子中，我们添加了一个 `Authorization` 头，其值是一个假设的认证令牌 `YOUR_AUTH_TOKEN`。第二个函数是当请求出现错误时执行，这里我们简单地将错误返回。

### 添加响应拦截器

响应拦截器会在服务器的响应数据到达 `then` 或 `catch` 之前被调用。以下是添加响应拦截器的一般方法：

```javascript
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // 可以根据你的需求来对响应数据做处理，这里只是一个示例
    if (response.data && response.data.success) {
        return response.data.data;
    } else {
        // 你可以在这里处理不成功的情况，或者抛出一个错误
        return Promise.reject('Error with request');
    }
}, function (error) {
    // 对响应错误做点什么
    if (error.response.status === 401) {
        // 如果状态码是 401，可以进行重新登录等处理
    }
    return Promise.reject(error);
});
```

在这个例子中，我们使用 `axios.interceptors.response.use` 添加了一个响应拦截器。它也接收两个函数，第一个函数在响应正确返回时被调用，接收响应对象 `response` 作为参数。在这个函数中，我们做了一些简单的判断，并只返回了实际需要的数据部分。第二个函数在响应出现错误时被调用，例如可以在这里处理 `401 Unauthorized` 状态码，实现自动重新登录或者跳转到登录页面等操作。

### 移除拦截器

如果你想在某个时刻移除拦截器，你可以这样做：

```javascript
// 添加拦截器时会返回一个拦截器的ID
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
// 通过这个ID可以移除拦截器
axios.interceptors.request.eject(myInterceptor);
```

在上面的代码中，我们首先添加了一个请求拦截器，并将返回的拦截器 ID 保存在 `myInterceptor` 变量中。然后，我们调用 `axios.interceptors.request.eject` 方法并传入这个 ID 来移除拦

简单来说，它更像是每个 HTTP 操作的检查点。已进行的每个 API 调用都会通过此拦截器传递。

**那么，为什么要两个拦截器呢？**

API 调用由两部分组成：请求和响应。由于它的行为类似于检查点，因此请求和响应具有单独的拦截器。

**一些请求拦截器用例 -**

假设您想在发出请求之前检查您的凭据是否有效。因此，您可以在拦截器级别检查您的凭据是否有效，而不是实际进行 API 调用。

假设您需要为每个发出的请求附加一个令牌，而不是在每次 Axios 调用时重复令牌添加逻辑，您可以创建一个拦截器，在发出的每个请求上附加一个令牌。

**一些响应拦截器用例 -**

假设您收到了响应，并根据您想要推断用户已登录的 API 响应进行判断。因此，在响应拦截器中，您可以初始化一个处理用户登录状态的类，并在响应对象上相应地更新它你收到。

假设您已使用有效的 API 凭据请求了某些 API，但您没有访问数据的有效角色。因此，您可以从响应拦截器触发警报，表示不允许该用户。这样，您就可以避免必须对您发出的每个 Axios 请求执行未经授权的 API 错误处理。

这是一些代码示例

**请求拦截器**

*   可以通过执行以下操作（在本例中，通过检查环境变量）打印 axios 的配置对象（如果需要）：
    
        const DEBUG = process.env.NODE_ENV === "development";
        
        axios.interceptors.request.use((config) => {
            /** In dev, intercepts request and logs it into console for dev */
            if (DEBUG) { console.info("✉️ ", config); }
            return config;
        }, (error) => {
            if (DEBUG) { console.error("✉️ ", error); }
            return Promise.reject(error);
        });
        
    
*   如果想要检查正在传递哪些标头/添加任何更多通用标头，则可以在`config.headers`对象中使用。例如：
    
        axios.interceptors.request.use((config) => {
            config.headers.genericKey = "someGenericValue";
            return config;
        }, (error) => {
            return Promise.reject(error);
        });
        
    
*   如果是请求`GET`，则可以在对象中找到发送的查询参数`config.params`。
    

**响应拦截器**

*   您甚至可以**选择**在拦截器级别解析 API 响应，并将解析后的响应而不是原始响应向下传递。如果在多个地方以相同的方式使用 API，它可能会节省您一次又一次编写解析逻辑的时间。一种方法是在响应拦截器中传递一个额外的参数，`api-request`并在响应拦截器中使用相同的参数来执行您的操作。例如：
    
        //Assume we pass an extra parameter "parse: true" 
        axios.get("/city-list", { parse: true });
        
    
    一旦，在响应拦截器中，我们可以像这样使用它：
    
        axios.interceptors.response.use((response) => {
            if (response.config.parse) {
                //perform the manipulation here and change the response object
            }
            return response;
        }, (error) => {
            return Promise.reject(error.message);
        });
        
    
    因此，在这种情况下，只要`parse`中有一个对象`response.config`，操作就完成，对于其余情况，它将按原样工作。
    
*   您甚至可以查看到达的`HTTP`代码，然后做出决定。例如：
    
        axios.interceptors.response.use((response) => {
            if(response.status === 401) {
                 alert("You are not authorized");
            }
            return response;
        }, (error) => {
            if (error.response && error.response.data) {
                return Promise.reject(error.response.data);
            }
            return Promise.reject(error.message);
        });

例如，如果您想捕获从发送请求到收到响应所花费的时间，您可以使用此代码：

    const axios = require("axios");
    
    (async () => {
      axios.interceptors.request.use(
        function (req) {
          req.time = { startTime: new Date() };
          return req;
        },
        (err) => {
          return Promise.reject(err);
        }
      );
    
      axios.interceptors.response.use(
        function (res) {
          res.config.time.endTime = new Date();
          res.duration =
            res.config.time.endTime - res.config.time.startTime;
          return res;
        },
        (err) => {
          return Promise.reject(err);
        }
      );
    
      axios
        .get("http://localhost:3000")
        .then((res) => {
          console.log(res.duration)
        })
        .catch((err) => {
          console.log(err);
        });
    })();

它就像一个中间件，基本上它被添加到任何请求（GET、POST、PUT、DELETE）或任何响应（从服务器获得的响应）上。常用于涉及授权的情况。

看看这个：[axios拦截器和异步登录](https://stackoverflow.com/questions/35900230/axios-interceptors-and-asynchronous-login)

这是关于此的另一篇文章，有一个不同的示例：[https://medium.com/@danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f0](https://medium.com/@danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f0)

因此，其中一个示例的要点是，您可以使用拦截器来检测您的授权令牌是否已过期（例如，如果您收到 403）并重定向页面。

我将为您提供我在现实项目中使用的更多实际用例。我通常使用，`request interceptor`对于与令牌相关的人员（`accessToken`，`refreshToken`），例如，令牌是否未过期，如果是，则使用refreshToken更新它并保留所有其他调用直到它解决。但我最喜欢的是 axios，`response interceptors`您可以在其中放置应用程序的全局错误处理逻辑，如下所示：

    httpClient.interceptors.response.use(
      (response: AxiosResponse) => {
        // Any status code that lie within the range of 2xx cause this function to trigger
        return response.data;
      },
      (err: AxiosError) => {
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        const status = err.response?.status || 500;
        // we can handle global errors here
        switch (status) {
          // authentication (token related issues)
          case 401: {
            return Promise.reject(new APIError(err.message, 409));
          }
    
          // forbidden (permission related issues)
          case 403: {
            return Promise.reject(new APIError(err.message, 409));
          }
    
          // bad request
          case 400: {
            return Promise.reject(new APIError(err.message, 400));
          }
    
          // not found
          case 404: {
            return Promise.reject(new APIError(err.message, 404));
          }
    
          // conflict
          case 409: {
            return Promise.reject(new APIError(err.message, 409));
          }
    
          // unprocessable
          case 422: {
            return Promise.reject(new APIError(err.message, 422));
          }
    
          // generic api error (server related) unexpected
          default: {
            return Promise.reject(new APIError(err.message, 500));
          }
        }
      }
    );

我已经通过以下方式实现了

_**httpConfig.js**_

    import axios from 'axios'
    import { baseURL } from '../utils/config'
    import { SetupInterceptors } from './SetupInterceptors'
    
    
    const http = axios.create({
        baseURL: baseURL
    })
    
    SetupInterceptors(http)
    
    export default http
    

_**安装拦截器.js**_

    import { baseURL } from '../utils/config'
    
    
    export const SetupInterceptors = http => {
    
        http.interceptors.request.use(
            config => {
                config.headers['token'] = `${localStorage.getItem('token')}`
                config.headers['content-type'] = 'application/json'
                return config
            },
            error => {
                return Promise.reject(error)
            }
        )
    
        http.interceptors.response.use(function(response) {
            return response
        }, function (error) {
            const status = error?.response?.status || 0
            const resBaseURL = error?.response?.config?.baseURL
            if (resBaseURL === baseURL && status === 401) {
                if (localStorage.getItem('token')) {
                    localStorage.clear()
                    window.location.assign('/')
                    return Promise.reject(error)
                } else {
                    return Promise.reject(error)
                }
            }
            return Promise.reject(error)
        })
    }
    
    export default SetupInterceptors
    

参考：[链接](https://javascript.plainenglish.io/http-interceptors-in-react-4dd7a35ba297)

How can you use axios interceptors

在使用 Axios 进行 POST 请求时，通常情况下，查询参数（query parameters）会附加在 URL 中，而请求体（request body）通常包含 POST 数据。如果你需要在 POST 请求中设置查询参数，你可以直接在 URL 中加入它们，或者使用 `params` 配置选项来指定这些参数。

下面是一个如何在 Axios POST 请求中设置查询参数的具体例子：

```javascript
const axios = require('axios');

// 设置 POST 请求的数据
const postData = {
    key1: 'value1',
    key2: 'value2'
};

// 设置查询参数
const queryParams = {
    param1: 'value1',
    param2: 'value2'
};

// 发起 POST 请求
axios.post('https://example.com/api/resource', postData, {
    params: queryParams
})
.then(response => {
    console.log('Response:', response.data);
})
.catch(error => {
    console.error('Error:', error);
});
```

在这个例子中，`postData` 是要发送到服务器的数据，而 `queryParams` 是我们想要附加在 URL 上的查询参数。通过 `params` 配置，Axios 会自动将查询参数拼接到请求的 URL 上。

生成的请求 URL 将类似于这样：

```
https://example.com/api/resource?param1=value1&param2=value2
```

同时，`postData` 中的内容会作为 POST 请求体发送。这种方式使得你可以同时在一个 POST 请求中发送请求体数据和查询参数。

帖子的 axios 签名是`axios.post(url[, data[, config]])`. 所以你想在第三个参数中发送 params 对象：

    .post(`/mails/users/sendVerificationMail`, null, { params: {
      mail,
      firstname
    }})
    .then(response => response.status)
    .catch(err => console.warn(err));
    

这将发布一个带有两个查询参数的空正文：

> POST [http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName](http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName)

截至 2021 年，安装了 null 我必须添加 {} 才能使其正常工作！

    axios.post(
            url,
            {},
            {
              params: {
                key,
                checksum
              }
            }
          )
          .then(response => {
            return success(response);
          })
          .catch(error => {
            return fail(error);
          });

就我而言，API 响应了 CORS 错误。相反，我将查询参数格式化为查询字符串。它成功地发布了数据，并且还避免了 CORS 问题。

            var data = {};
    
            const params = new URLSearchParams({
              contact: this.ContactPerson,
              phoneNumber: this.PhoneNumber,
              email: this.Email
            }).toString();
    
            const url =
              "https://test.com/api/UpdateProfile?" +
              params;
    
            axios
              .post(url, data, {
                headers: {
                  aaid: this.ID,
                  token: this.Token
                }
              })
              .then(res => {
                this.Info = JSON.parse(res.data);
              })
              .catch(err => {
                console.log(err);
              });

您可以在 axios 请求中同时使用 params 和 body

      sendAllData (data) {
       return axios
            .post(API_URL + "receiveData", JSON.stringify(data), {
              headers: { "Content-Type": "application/json; charset=UTF-8" },
              params: { mail: xyx@example.col }, //Add mail as a param
            })
            .then((response) => console.log("repsonse", response.status)); 
      }

Axios 如何在 post 请求中携带 query 参数？

在Go语言中，为随机数生成器设置种子通常涉及到`math/rand`包。这个包提供了伪随机数生成器的功能。`rand.Seed`函数用来初始化默认的随机数生成器的种子。如果不设置种子，随机数生成器将默认使用种子1，这会导致每次程序运行时生成的随机数序列是相同的。

为了生成不同的随机数序列，我们应该在使用随机数之前提供一个变化的种子。通常，我们会使用当前时间作为种子，因为它总是在变化的。下面是一个如何设置随机数种子的例子：

```go
package main

import (
    "fmt"
    "math/rand"
    "time"
)

func main() {
    // 使用当前时间的纳秒时间戳初始化种子
    rand.Seed(time.Now().UnixNano())

    // 生成一个随机数
    randomNumber := rand.Intn(100) // 生成一个[0, 100)的随机数
    fmt.Println(randomNumber)
}
```

在这段代码中，我们使用了`time.Now().UnixNano()`来得到当前时间的纳秒时间戳，并将其作为参数传递给`rand.Seed`函数。这样，每次程序运行时，由于时间的不同，种子也会不同，从而使得随机数生成器产生不同的随机数序列。

需要注意的是，`math/rand`包生成的是伪随机数，它们是由确定性算法生成的，因此它们并不适合于所有的场景，尤其是安全性要求较高的场景。对于需要加密安全等级的随机数，应当使用`crypto/rand`包。

每次设置相同的种子时，您都会得到相同的序列。因此，当然，如果您在快速循环中将种子设置为时间，则可能会使用相同的种子多次调用它。

在您的情况下，当您调用`randInt`函数直到获得不同的值时，您正在等待时间（由 Nano 返回）更改。

[对于所有伪随机库](http://en.wikipedia.org/wiki/Pseudorandom_number_generator)，您只需设置种子一次，例如在初始化程序时，除非您特别需要重现给定的序列（通常仅用于调试和单元测试）。

之后，您只需调用即可`Intn`获取下一个随机整数。

将`rand.Seed(time.Now().UTC().UnixNano())`代码行从 randInt 函数移至 main 函数的开头，一切都会变得更快。并且`.UTC()`由于以下原因失去了通话：

> UnixNano 返回 t 作为 Unix 时间，即自 UTC 1970 年 1 月 1 日以来经过的纳秒数。

另请注意，我认为您可以简化字符串构建：

 package main
 
 import (
 "fmt"
 "math/rand"
 "time"
 )
 
 func main() {
 rand.Seed(time.Now().UnixNano())
 fmt.Println(randomString(10))
 }
 
 func randomString(l int) string {
 bytes := make([]byte, l)
 for i := 0; i < l; i++ {
 bytes[i] = byte(randInt(65, 90))
 }
 return string(bytes)
 }
 
 func randInt(min int, max int) int {
 return min + rand.Intn(max-min)
 }

_**编辑：这个问题已在 Go 版本 1.20 中得到解决，不再需要自己播种随机源。**_

我不明白为什么人们要以时间价值播种。根据我的经验，这从来都不是一个好主意。例如，虽然系统时钟可能以纳秒表示，但系统的时钟精度不是纳秒。

[该程序](https://play.golang.org/p/yXff-pLwtwC)不应该在 Go Playground 上运行，但如果您在自己的机器上运行它，您可以粗略估计您可以期望的精度类型。我看到增量约为 1000000 ns，因此增量为 1 毫秒。这是未使用的 20 位熵。_一直以来，高位大多是恒定的！？_一天大约有 24 位熵，这是非常暴力的（可能会产生漏洞）。

这对您来说重要的程度会有所不同，但您可以通过简单地使用作为`crypto/rand.Read`种子源来避免基于时钟的种子值的陷阱。它将为您提供您可能在随机数中寻找的非确定性质量（即使实际实现本身仅限于一组不同且确定性的随机序列）。

    import (
        crypto_rand "crypto/rand"
        "encoding/binary"
        math_rand "math/rand"
    )
    
    func init() {
        var b [8]byte
        _, err := crypto_rand.Read(b[:])
        if err != nil {
            panic("cannot seed math/rand package with cryptographically secure random number generator")
        }
        math_rand.Seed(int64(binary.LittleEndian.Uint64(b[:])))
    }
    

作为旁注，但与您的问题有关。您可以使用此方法创建自己的`rand.Source`方法，以避免使用锁保护源的成本。包`rand`实用函数很方便，但它们也在幕后使用锁来防止源被同时使用。如果您不需要，您可以通过创建自己的`Source`并以非并发方式使用它来避免它。无论如何，您不应该在迭代之间重新播种随机数生成器，它从来没有被设计为以这种方式使用。

* * *

编辑：我曾经在 ITAM/SAM 工作，我们构建的客户端（然后）使用了基于时钟的种子。Windows 更新后，公司中的许多机器几乎同时重新启动。这导致了对上游服务器基础设施的 Involtery DoS 攻击，因为客户端使用系统运行时间来播种随机性，而这些机器最终或多或少地随机选择相同的时间段进行报告。它们的目的是在一段时间内涂抹负载。一个小时左右，但那没有发生。种子负责任！

只是为了把它扔给后代：有时最好使用初始字符集字符串生成随机字符串。如果字符串应该由人手动输入，那么这很有用；排除 0、O、1 和 l 有助于减少用户错误。

 var alpha = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789"
 
 // generates a random string of fixed size
 func srand(size int) string {
 buf := make([]byte, size)
 for i := 0; i < size; i++ {
 buf[i] = alpha[rand.Intn(len(alpha))]
 }
 return string(buf)
 }
 

我通常将种子设置在一个`init()`块内。它们记录在这里：[http://golang.org/doc/ effective\_go.html #init](http://golang.org/doc/effective_go.html#init)

在 Go 1.20（2022 年第 4 季度）中，播种随机数生成器的正确方法也可能是……不执行任何操作。

如果`Seed`未调用，生成器将在程序启动时随机播种。

提案“ [`math/rand`：随机生成全局种子](https://github.com/golang/go/issues/54880)”被接受（2022 年 10 月），并且已经开始实施：

*   [CL 443058](https://go-review.googlesource.com/c/go/+/443058) : `math/rand`: 自动种子全局源

> 实施提案[#54880](https://github.com/golang/go/issues/54880)，自动播种全局源。

> 这不是重大更改的理由是，在包的`init`函数或导出的 API 中对全局源的任何使用显然都必须有效 - 也就是说，如果包改变了它在某个时间或在导出的 API 中消耗的随机性`init`，那么显然不是那种需要发布该软件包 v2 的重大更改。  
> 这种按包改变全局源位置与以不同方式播种全局源没有什么区别。因此，如果每个包的更改有效，那么自动播种也是有效的。
> 
> 当然，自动播种意味着包将不太可能依赖于全局源的特定结果，因此当将来发生此类每个包的更改时也不会中断。
> 
> `Seed(1)`可以在需要全局源旧序列并想要恢复旧行为的程序中调用。  
> 当然，这些程序仍然会被刚才描述的每个包的更改所破坏，并且它们最好分配本地源而不是继续使用全局源。

* * *

从[问题 20661](https://github.com/golang/go/issues/20661)和[CL 436955](https://go-review.googlesource.com/c/go/+/436955)中，还请注意`math/rand.Read`已弃用：对于几乎所有用例，`crypto/rand.Read`更合适。

正如[这里所指出的](https://github.com/golang/go/issues/20661#issuecomment-1318871140)：

> 可以像这样使用`gosec`linter`golanglint-ci`并观察`G404`代码：
> 
>     golangci-lint run --disable-all --enable gosec
>

好吧为什么这么复杂！

 package main
 
 import (
 "fmt"
 "math/rand"
 "time"
 )
 
 func main() {
 rand.Seed( time.Now().UnixNano())
 var bytes int
 
 for i:= 0 ; i < 10 ; i++{ 
 bytes = rand.Intn(6)+1
 fmt.Println(bytes)
 }
 //fmt.Println(time.Now().UnixNano())
 }
 

这是基于dystroy 的代码，但适合我的需要。

这是骰子六（rands ints `1 =< i =< 6`）

 func randomInt (min int , max int ) int {
 var bytes int
 bytes = min + rand.Intn(max)
 return int(bytes)
 }
 

上面的函数是完全相同的。

我希望这些信息有用。

How to properly seed random number generator

Golang（通常称为Go）的编译速度之所以快，主要是归功于以下几个设计决策和特性：

1. **简化的依赖模型**：Go具有明确的依赖模型，每个文件都声明了它的直接依赖项。这种模型简化了依赖关系的管理，并且使得编译器能够快速确定哪些文件需要重新编译，哪些不需要。

2. **包模型**：Go的包模型也有助于加快编译速度。每个包被编译成一个单独的二进制文件，只有当包的源文件发生变化时才需要重新编译，而不是像一些其他语言那样需要重新编译整个项目。

3. **并发编译**：Go编译器被设计成能够利用现代多核处理器。它可以并发地编译不同的文件和包，最大化利用CPU资源，从而减少编译时间。

4. **简化的语言特性**：Go的设计哲学是简洁和清晰，避免了复杂的语言特性，例如类继承。这些简化的特性意味着编译器有更少的工作要做，因此编译过程可以更快完成。

5. **快速解析的语法**：Go的语法设计使得代码可以快速且一次性解析，减少了编译过程中的回溯。这使得语法分析阶段非常高效。

6. **直接生成机器代码**：Go编译器直接生成目标平台的机器代码，而不是像其他语言（如Java或C#）那样生成中间字节码。这样可以避免运行时解释或即时编译，提高编译效率。

7. **编译器优化**：Go编译器经过了优化，以便快速处理代码。这包括对语言特性进行了优化，使得编译器能够有效地生成代码。

举个例子，如果你在一个大型Go项目中只修改了一个小的包，Go编译器会识别出只有这个包及其依赖需要重新编译。由于它可以并发编译独立的包，并且每个包编译后都是独立的二进制文件，这意味着整个编译过程只需要很短的时间就可以完成。

因此，Go的快速编译是多种因素综合作用的结果，这些因素共同构成了Go语言快速且高效编译过程的基础。

依赖性分析。

Go [FAQ](http://golang.org/doc/go_faq.html)曾经包含以下句子：

> Go 提供了一个软件构建模型，使依赖性分析变得容易，并避免了 C 风格包含文件和库的大部分开销。

虽然该短语不再出现在常见问题解答中，但该主题在[Google 的 Go](https://talks.golang.org/2012/splash.article#TOC_5.)演讲中进行了详细阐述，该演讲比较了 C/C++ 和 Go 的依赖分析方法。

这是编译速度快的主要原因。这是设计使然。

我认为并不是Go编译器_快_，而是其他编译器_慢_。

C 和 C++ 编译器必须解析大量的标头 - 例如，编译 C++“hello world”需要编译 18k 行代码，这几乎是半兆字节的源代码！

    $ cpp hello.cpp | wc
      18364   40513  433334
    

Java 和 C# 编译器在 VM 中运行，这意味着在编译任何内容之前，操作系统必须加载整个 VM，然后必须将它们从字节码 JIT 编译为本机代码，所有这些都需要一些时间。

编译速度取决于几个因素。

有些语言被设计为可以快速编译。例如，Pascal 被设计为使用单遍编译器进行编译。

编译器本身也可以优化。例如，Turbo Pascal 编译器是用手工优化的汇编程序编写的，与语言设计相结合，产生了在 286 级硬件上运行的非常快的编译器。我认为即使是现在，现代 Pascal 编译器（例如 FreePascal）也比 Go 编译器更快。

Go 编译器比大多数 C/C++ 编译器快得多的原因有多种：

*   **主要原因**：大多数 C/C++ 编译器的设计都非常糟糕（从编译速度的角度来看）。此外，从编译速度的角度来看，C/C++ 生态系统的某些部分（例如程序员编写代码的编辑器）在设计时并未考虑编译速度。
    
*   **首要原因**：快速编译速度是 Go 编译器和 Go 语言的一个有意识的选择
    
*   Go 编译器比 C/C++ 编译器有更简单的优化器
    
*   与 C++ 不同，Go 没有模板，也没有内联函数。这意味着 Go 不需要执行任何模板或函数实例化。
    
*   Go 编译器会更快地生成低级汇编代码，优化器会处理汇编代码，而在典型的 C/C++ 编译器中，优化过程会处理原始源代码的内部表示。C/C++ 编译器中的额外开销来自需要生成内部表示的事实。
    
*   Go 程序的最终链接 (5l/6l/8l) 可能比链接 C/C++ 程序慢，因为 Go 编译器会遍历所有使用的汇编代码，并且可能还会执行 C/C++ 所不具备的其他额外操作链接器没有做
    
*   一些 C/C++ 编译器 (GCC) 以文本形式生成指令（将传递给汇编器），而 Go 编译器以二进制形式生成指令。需要完成额外的工作（但不多）才能将文本转换为二进制。
    
*   Go编译器仅针对少量CPU架构，而GCC编译器针对大量CPU
    
*   以高编译速度为目标的编译器（例如 Jikes）速度很快。在 2GHz CPU 上，Jikes 每秒可以编译 20000+ 行 Java 代码（增量编译模式效率更高）。

编译效率是一个主要设计目标：

> 最后，它的目的是要快速：在一台计算机上构建一个大型可执行文件最多需要几秒钟。为了实现这些目标，需要解决许多语言问题：富有表现力但轻量级的类型系统；并发和垃圾收集；严格的依赖规范；等等。[常问问题](http://golang.org/doc/faq)

关于与解析相关的特定语言功能，语言常见问题解答非常有趣：

> 其次，该语言被设计为易于分析，无需符号表即可解析。

虽然上面的大部分内容都是正确的，但有一个非常重要的点没有真正提到：依赖管理。

_Go 只需要包含您直接_导入的包（因为那些已经导入了_它们_需要的包）。这与 C/C++ 形成鲜明对比，C/C++ 中**每个文件**开始都包含 x 个标头，其中包括 y 标头等。底线：Go 的编译时间与导入包的数量呈线性关系，而 C/C++ 则需要指数时间。

How does go compile so quickly

在 Golang 中，我们可以使用 `os` 标准库中的 `Executable` 函数来获取当前正在执行的可执行文件的完整路径，然后使用 `filepath` 标准库中的 `Dir` 函数来从完整路径中提取出目录。

下面是一个如何获取当前运行文件所在目录的示例代码：

```go
package main

import (
	"fmt"
	"os"
	"path/filepath"
)

func main() {
	// 获取当前执行的可执行文件的路径
	exePath, err := os.Executable()
	if err != nil {
		panic(err)
	}

	// 获取可执行文件所在的目录
	exeDir := filepath.Dir(exePath)

	fmt.Println("当前运行文件的目录是:", exeDir)
}
```

在这个例子中，我们首先调用了 `os.Executable()` 函数来获取可执行文件的完整路径。如果调用成功，它会返回路径字符串和 `nil` 错误。如果有错误发生，我们通过 `panic` 终止程序。获取到可执行文件的完整路径后，我们使用 `filepath.Dir()` 函数来从中提取出文件所在的目录。

执行上面的程序，它将打印出当前运行的可执行文件所在的目录。这对于许多需要相对于可执行文件定位资源文件的应用程序非常有用，例如配置文件和模板。

编辑：从 Go 1.8（2017 年 2 月发布）开始，推荐的方法是[`os.Executable`](https://tip.golang.org/pkg/os/#Executable)：

> `func Executable() (string, error)`
> 
> 可执行文件返回启动当前进程的可执行文件的路径名。无法保证路径仍然指向正确的可执行文件。如果使用符号链接来启动进程，则结果可能是符号链接或其指向的路径，具体取决于操作系统。如果需要稳定的结果，path/filepath.EvalSymlinks 可能会有所帮助。

要仅获取可执行文件的目录，您可以使用[`path/filepath.Dir`](https://golang.org/pkg/path/filepath/#Dir).

[例子](https://play.golang.org/p/_aolLr7uEH)：

    package main
    
    import (
        "fmt"
        "os"
        "path/filepath"
    )
    
    func main() {
        ex, err := os.Executable()
        if err != nil {
            panic(err)
        }
        exPath := filepath.Dir(ex)
        fmt.Println(exPath)
    }
    

* * *

旧答案：

你应该能够使用[`os.Getwd`](http://golang.org/pkg/os/#Getwd)

    func Getwd() (pwd string, err error)
    

> Getwd 返回与当前目录相对应的根路径名。如果当前目录可以通过多个路径到达（由于符号链接），Getwd 可能会返回其中任何一个。

例如：

    package main
    
    import (
        "fmt"
        "os"
    )
    
    func main() {
        pwd, err := os.Getwd()
        if err != nil {
            fmt.Println(err)
            os.Exit(1)
        }
        fmt.Println(pwd)
    }

这应该可以做到：

    import (
        "fmt"
        "log"
        "os"
        "path/filepath"
    )
    
    func main() {
        dir, err := filepath.Abs(filepath.Dir(os.Args[0]))
        if err != nil {
                log.Fatal(err)
        }
        fmt.Println(dir)
    }

使用[osext包](https://github.com/kardianos/osext)

它提供的函数`ExecutableFolder()`返回当前运行的程序可执行文件所在文件夹的绝对路径（对于 cron 作业很有用）。它是跨平台的。

[在线文档](http://godoc.org/github.com/kardianos/osext)

    package main
    
    import (
        "github.com/kardianos/osext"
        "fmt"
        "log"
    )
    
    func main() {
        folderPath, err := osext.ExecutableFolder()
        if err != nil {
            log.Fatal(err)
        }
        fmt.Println(folderPath)
    }

我从 Node.js 转向 Go。相当于 Go 中的 Node.js`__dirname`是：

    _, filename, _, ok := runtime.Caller(0)
    if !ok {
        return errors.New("unable to get the current filename")
    }
    dirname := filepath.Dir(filename)
    

该线程中还提到了一些其他内容以及为什么它们是错误的：

*   `os.Executable()`将为您提供当前运行的可执行文件的文件路径。这相当于`process.argv[0]`在 Node.js 中。`__dirname`如果您想获取子包的 ，则情况并非如此。
*   `os.Getwd()`会给你当前的工作目录。这相当于`process.cwd()`在 Node.js 中。当您从另一个目录运行程序时，这将是错误的。

最后，我建议不要为此用例引入第三方包。这是您可以使用的包：

    package current
    
    // Filename is the __filename equivalent
    func Filename() (string, error) {
        _, filename, _, ok := runtime.Caller(1)
        if !ok {
            return "", errors.New("unable to get the current filename")
        }
        return filename, nil
    }
    
    
    // Dirname is the __dirname equivalent
    func Dirname() (string, error) {
        filename, err := Filename()
        if err != nil {
            return "", err
        }
        return filepath.Dir(filename), nil
    }
    

请注意，我已调整`runtime.Caller(1)`为 1，因为我们想要获取调用的包的目录`current.Dirname()`，而不是包含该包的目录`current`。

**更新 (12/23)**正如 @VonC[下面指出的](https://stackoverflow.com/a/72174376/145435)，当您运行`go build`并分发二进制文件时，`runtime.Caller(0)`, 将继续是_您的目录_。这可能不是您想要的。此行为与 不同`__dirname`，后者将反映文件所在位置的目录名。Go 中的这种行为没有完美的等价物。

如果你这样做：

    dir, err := filepath.Abs(filepath.Dir(os.Args[0]))
    if err != nil {
        log.Fatal(err)
    }
    fmt.Println(dir)
    

当您使用 GoLand 等 IDE 运行程序时，您将获得 /tmp 路径，因为可执行文件将从 /tmp 保存并运行

我认为获取当前工作目录或“。”的最佳方法 是 ：

    import(
      "os" 
      "fmt"
      "log"
    )
    
    func main() {
      dir, err := os.Getwd()
        if err != nil {
            log.Fatal(err)
        }
      fmt.Println(dir)
    }
    

os.Getwd **()**函数将返回当前工作目录。

How to get the directory of the currently running file

在使用 Axios 进行文件上传时，通常会采用 `FormData` 对象来构建表单数据，并利用 Axios 发送 `POST` 请求。这里是一个具体的实现步骤：

1. **创建 `FormData` 对象：** 这个对象用于构建键值对，它将与普通的表单提交相同，其中可以包括文件对象。

2. **追加文件数据：** 使用 `FormData` 的 `append` 方法将文件附加到表单数据中。

3. **发送请求：** 使用 Axios 发起 `POST` 请求，并将 `FormData` 对象作为请求体传递。

4. **设置请求头（可选）：** 在发送请求时，可以设置 `Content-Type` 为 `multipart/form-data`，但是通常情况下，浏览器会自动设置正确的 `Content-Type` 并包含边界字符串(boundary string)，所以这个步骤可以省略。

具体的代码示例如下：

```javascript
// 引入 axios 库
import axios from 'axios';

// 准备上传的文件对象，例如从一个<input type="file">元素获取
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

// 创建 FormData 实例
const formData = new FormData();
// 将文件数据追加到 FormData 实例中，'image' 是后端接口识别的字段名
formData.append('image', file);

// 设置 Axios 请求配置，如有需要可以在这里设置请求头等信息
const config = {
 headers: {
 // 'Content-Type': 'multipart/form-data' ，通常不需要手动设置
 },
 onUploadProgress: function(progressEvent) {
 // 这里可以处理上传进度事件
 const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
 console.log(percentCompleted);
 }
};

// 使用 axios 发起 POST 请求
axios.post('上传文件的URL', formData, config)
 .then(function (response) {
 // 处理响应数据
 console.log('文件上传成功：', response);
 })
 .catch(function (error) {
 // 处理错误情况
 console.error('文件上传出错：', error);
 });
```

在上面的过程中，你可以看到，我是怎样创建 `FormData` 对象，并附上文件，然后通过 Axios 发送到服务器的。这种方式不仅用于文件上传，还可以上传其他类型的二进制数据。同时，通过监听 `onUploadProgress` 事件，我们可以获取上传的进度信息，为用户提供更好的交云体验。

将文件添加到`formData`对象，并将`Content-Type`标头设置为`multipart/form-data`.

    var formData = new FormData();
    var imagefile = document.querySelector('#file');
    formData.append("image", imagefile.files[0]);
    axios.post('upload_file', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })

使用 Vue 的示例应用程序。需要在本地主机上运行的后端服务器来处理请求：

    var app = new Vue({
      el: "#app",
      data: {
        file: ''
      },
      methods: {
        submitFile() {
          let formData = new FormData();
          formData.append('file', this.file);
          console.log('>> formData >> ', formData);
    
          // You should have a server side REST API 
          axios.post('http://localhost:8080/restapi/fileupload',
              formData, {
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
              }
            ).then(function () {
              console.log('SUCCESS!!');
            })
            .catch(function () {
              console.log('FAILURE!!');
            });
        },
        handleFileUpload() {
          this.file = this.$refs.file.files[0];
          console.log('>>>> 1st element in files array >>>> ', this.file);
        }
      }
    });
    

[https://codepen.io/pmarimuthu/pen/MqqaOE](https://codepen.io/pmarimuthu/pen/MqqaOE)

如果您不想使用对象`FormData`（例如，您的 API 采用特定的内容类型签名，但`multipart/formdata`不是其中之一），那么您可以这样做：

    uploadFile: function (event) {
        const file = event.target.files[0]
        axios.post('upload_file', file, {
            headers: {
              'Content-Type': file.type
            }
        })
    }

分享我使用 React 和 HTML 输入的经验

定义输入字段

 <input type="file" onChange={onChange} accept ="image/*"/>
 

定义 onChange 监听器

 const onChange = (e) => {
 let url = "https://<server-url>/api/upload";
 let file = e.target.files[0];
 uploadFile(url, file);
 };
 
 const uploadFile = (url, file) => {
 let formData = new FormData();
 formData.append("file", file);
 axios.post(url, formData, {
 headers: {
 "Content-Type": "multipart/form-data",
 },
 }).then((response) => {
 fnSuccess(response);
 }).catch((error) => {
 fnFail(error);
 });
 };
 const fnSuccess = (response) => {
 //Add success handling
 };
 
 const fnFail = (error) => {
 //Add failed handling
 };

这对我有用，我希望对某人有帮助。

    var frm = $('#frm');
    let formData = new FormData(frm[0]);
    axios.post('your-url', formData)
        .then(res => {
            console.log({res});
        }).catch(err => {
            console.error({err});
        });

How to post a file from a form with axios

当使用 Axios 进行文件下载时，我们需要设置适当的响应类型，并处理返回的数据以实现下载。这里是一个将 Axios 用于文件下载的步骤说明：

1. **设置 Axios 请求以获取 Blob 数据**:
   要下载文件，我们需要以 `blob` 类型接收数据。在发送请求时，可以设置 Axios 的 `responseType` 为 `'blob'`。

2. **发送 GET 请求**:
   发送到文件所在位置的 GET 请求将获取文件内容。

3. **处理响应并创建下载链接**:
   一旦收到响应，我们将使用 `URL.createObjectURL()` 方法来创建一个指向该 blob 的 URL。

4. **触发文件下载**:
   创建一个 `a` 标签，并设置 `href` 为之前创建的 blob URL，并设置 `download` 属性以指定下载文件的名称。然后通过编程方式触发 `click` 事件来开始下载。

5. **清理**:
   下载完成后，应清理对象URL以释放浏览器中的资源。

下面是一个具体的代码示例：

```javascript
import axios from 'axios';

function downloadFile(url, filename) {
  axios({
    url: url, // 文件的 URL
    method: 'GET',
    responseType: 'blob', // 重要
  }).then((response) => {
    // 创建一个链接元素
    const link = document.createElement('a');
    // 创建下载的链接
    link.href = window.URL.createObjectURL(new Blob([response.data]));
    // 设置下载后文件的名称
    link.setAttribute('download', filename);
    // 隐藏该元素
    link.style.visibility = 'hidden';
    // 将链接元素添加到DOM中
    document.body.appendChild(link);
    // 触发点击
    link.click();
    // 移除链接元素
    document.body.removeChild(link);
    // 清理URL对象
    window.URL.revokeObjectURL(link.href);
  }).catch((error) => console.error('File download failed:', error));
}

// 调用函数以下载文件
downloadFile('https://example.com/somefile.pdf', 'myFile.pdf');
```

在这个例子中，`downloadFile` 函数接受文件的 URL 和希望保存的文件名作为参数。然后，使用 Axios 发送 GET 请求并设置 `responseType` 为 `blob`。一旦收到响应，我们创建一个不可见的 `a` 标签来触发下载。最后，确保在完成后清理已创建的 blob URL。

1. 使用 axios 下载文件作为`responseType: 'blob'`
2. 使用 Axios/Server 响应中的 blob 创建文件链接
3. 创建`<a>`HTML 元素，其中的 href 链接到步骤 2 中创建的文件链接并单击该链接
4. 清理动态创建的文件链接和 HTML 元素

 axios({
 url: 'http://api.dev/file-download', //your url
 method: 'GET',
 responseType: 'blob', // important
 }).then((response) => {
 // create file link in browser's memory
 const href = URL.createObjectURL(response.data);
 
 // create "a" HTML element with href to file & click
 const link = document.createElement('a');
 link.href = href;
 link.setAttribute('download', 'file.pdf'); //or any other extension
 document.body.appendChild(link);
 link.click();
 
 // clean up "a" element & remove ObjectURL
 document.body.removeChild(link);
 URL.revokeObjectURL(href);
 });
 

查看怪癖[https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743](https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743)

完整学分：https: [//gist.github.com/javilobo8](https://gist.github.com/javilobo8)

MDN 上提供了更多文档[`URL.createObjectURL`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL)。[`URL.revokeObjectURL`](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)释放对象对于防止内存泄漏至关重要。在上面的函数中，由于我们已经下载了文件，因此我们可以立即撤销该对象。

> 每次调用 createObjectURL() 时，都会创建一个新的对象 URL，即使您已经为同一对象创建了一个 URL。当您不再需要它们时，必须通过调用 URL.revokeObjectURL() 来释放它们中的每一个。

> 当文档被卸载时，浏览器会自动释放对象URL；但是，为了获得最佳性能和内存使用率，如果存在可以显式卸载它们的安全时间，则应该这样做。

当响应带有可下载文件时，响应标头将类似于

 Content-Disposition: "attachment;filename=report.xls"
 Content-Type: "application/octet-stream" // or Content-type: "application/vnd.ms-excel"
 

您可以做的是创建一个单独的组件，其中将包含一个隐藏的 iframe。

 import * as React from 'react';
 
 var MyIframe = React.createClass({
 
 render: function() {
 return (
 <div style={{display: 'none'}}>
 <iframe src={this.props.iframeSrc} />
 </div>
 );
 }
 });
 

现在，您可以将可下载文件的 url 作为 prop 传递给该组件，因此当该组件收到 prop 时，它将重新渲染并下载文件。

**编辑：**您还可以使用[js-file-download](https://www.npmjs.com/package/js-file-download)模块。[链接到 Github 存储库](https://github.com/kennethjiang/js-file-download)

 const FileDownload = require('js-file-download');
 
 Axios({
 url: 'http://localhost/downloadFile',
 method: 'GET',
 responseType: 'blob', // Important
 }).then((response) => {
 FileDownload(response.data, 'report.csv');
 });

下载文件（使用 Axios 和 Security）
=========================

当您想要使用 Axios 和某些安全手段下载文件时，这实际上更加复杂。为了防止其他人花太多时间来解决这个问题，让我引导您完成这个过程。

你需要做三件事：

1.  配置您的服务器以允许浏览器查看所需的 HTTP 标头
2.  实现服务器端服务，并使其通告下载文件的正确文件类型。
3.  实现 Axios 处理程序以在浏览器中触发 FileDownload 对话框

这些步骤大多是可行的 - 但由于浏览器与 CORS 的关系而变得相当复杂。一步一步来：

1\. 配置您的 (HTTP) 服务器
-------------------

当采用传输安全性时，浏览器中执行的 JavaScript \[根据设计\]只能访问 HTTP 服务器实际发送的 6 个 HTTP 标头。如果我们希望服务器建议下载的文件名，我们必须通知浏览器“可以”授予 JavaScript 访问将传输建议文件名的其他标头的权限。

为了便于讨论，我们假设我们希望服务器在名为**X-Suggested-Filename 的**HTTP 标头中传输建议的文件名。HTTP 服务器告诉浏览器可以_将_收到的自定义标头公开给 JavaScript/Axios，其中标头如下：

    Access-Control-Expose-Headers: X-Suggested-Filename
    

配置 HTTP 服务器以设置此标头的确切方法因产品而异。

> 有关这些标准标头的完整说明和详细说明，请参阅[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers 。](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers)

2\. 实现服务器端服务
------------

您的服务器端服务实现现在必须执行两件事：

1.  创建（二进制）文档并将正确的 ContentType 分配给响应
2.  分配包含客户端建议文件名的自定义标头 (X-Suggested-Filename)

根据您选择的技术堆栈，可以通过不同的方式完成此操作。我将使用 JavaEE 7 标准绘制一个示例，该示例应生成 Excel 报告：

        @GET
        @Path("/report/excel")
        @Produces("application/vnd.ms-excel")
        public Response getAllergyAndPreferencesReport() {
    
            // Create the document which should be downloaded
            final byte[] theDocumentData = .... 
    
            // Define a suggested filename
            final String filename = ... 
         
            // Create the JAXRS response
            // Don't forget to include the filename in 2 HTTP headers: 
            //
            // a) The standard 'Content-Disposition' one, and
            // b) The custom 'X-Suggested-Filename'  
            //
            final Response.ResponseBuilder builder = Response.ok(
                    theDocumentData, "application/vnd.ms-excel")
                    .header("X-Suggested-Filename", fileName);
            builder.header("Content-Disposition", "attachment; filename=" + fileName);
    
            // All Done.
            return builder.build();
        }
    

该服务现在发出二进制文档（在本例中为 Excel 报告），设置正确的内容类型 - 并且还发送一个自定义 HTTP 标头，其中包含保存文档时要使用的建议文件名。

3\. 为接收到的文档实现 Axios 处理程序
------------------------

这里有一些陷阱，所以让我们确保所有细节都正确配置：

1.  服务响应@GET（即HTTP GET），因此axios调用必须是'axios.get(...)'。
2.  该文档作为字节流传输，因此您必须告诉 Axios 将响应视为 HTML5 Blob。（即_responseType: 'blob'_）。
3.  在本例中，文件保护程序 JavaScript 库用于弹出浏览器对话框。但是，您可以选择另一个。

Axios 的框架实现将类似于：

         // Fetch the dynamically generated excel document from the server.
         axios.get(resource, {responseType: 'blob'}).then((response) => {
    
            // Log somewhat to show that the browser actually exposes the custom HTTP header
            const fileNameHeader = "x-suggested-filename";
            const suggestedFileName = response.headers[fileNameHeader];
            const effectiveFileName = (suggestedFileName === undefined
                        ? "allergierOchPreferenser.xls"
                        : suggestedFileName);
            console.log(`Received header [${fileNameHeader}]: ${suggestedFileName}, effective fileName: ${effectiveFileName}`);
    
            // Let the user save the file.
            FileSaver.saveAs(response.data, effectiveFileName);
    
            }).catch((response) => {
                console.error("Could not Download the Excel report from the backend.", response);
            });

**axios.post 与 IE 等浏览器的解决方案**

我在这里找到了一些令人难以置信的解决方案。但他们常常不考虑 IE 浏览器的问题。也许这会为其他人节省一些时间。

    axios.post("/yourUrl",
        data,
        { responseType: 'blob' }
    ).then(function (response) {
        let fileName = response.headers["content-disposition"].split("filename=")[1];
        if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE variant
            window.navigator.msSaveOrOpenBlob(new Blob([response.data],
                    { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
                ),
                fileName
            );
        } else {
            const url = window.URL.createObjectURL(new Blob([response.data],
                { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download',
                response.headers["content-disposition"].split("filename=")[1]);
            document.body.appendChild(link);
            link.click();
        }
        }
    );
    

上面的示例适用于 Excel 文件，但只需稍作更改即可应用于任何格式。

在服务器上我这样做是为了发送 Excel 文件。

    response.contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    
    response.addHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=exceptions.xlsx")

> 使用 axios 进行 API 调用的函数：

    function getFileToDownload (apiUrl) {
       return axios.get(apiUrl, {
         responseType: 'arraybuffer',
         headers: {
           'Content-Type': 'application/json'
         }
       })
    }
    

> 调用该函数，然后下载得到的 excel 文件：

    getFileToDownload('putApiUrlHere')
      .then (response => {
          const type = response.headers['content-type']
          const blob = new Blob([response.data], { type: type, encoding: 'UTF-8' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = 'file.xlsx'
          link.click()
      })

How to download files using axios

当然，axios和fetch都是进行HTTP请求的流行工具，它们在JavaScript环境中被用于与服务器进行通信。它们之间有一些关键的区别：

1. **支持的浏览器**: `fetch`是现代浏览器提供的原生API，不需要额外的库就可以使用。然而，一些旧的浏览器并不支持`fetch`。而`axios`是一个第三方库，可以通过npm来安装，并且它用了一些polyfills来确保在所有支持Promise的浏览器中都可以工作。

2. **使用方式**: `fetch`的API使用起来更加原始一些，只提供了基本的功能，这意味着我们在处理JSON数据，处理错误以及设置超时等方面需要写更多的代码。而`axios`提供了一些更高级的功能，比如自动转换JSON数据，拦截请求和响应，以及更容易的错误处理。

3. **错误处理**: `fetch`在请求成功发送并且服务器相应时（即使是404或500这样的HTTP错误状态码）都会resolve，只有在网络故障或请求被阻止时才会reject。这意味着你需要在每个`fetch`调用后检查response.ok属性。而`axios`会在响应状态码落在2xx范围之外时自动reject，这使得错误处理变得更简单。

4. **超时设置**: 在`fetch`中，没有原生的超时设置，你需要实现自己的逻辑来处理超时。而`axios`允许你在请求配置中直接设置`timeout`属性。

5. **请求取消**: `axios`支持取消正在进行的请求，而`fetch`虽然在现代浏览器中支持AbortController来取消请求，但这是一个相对较新的功能，旧浏览器可能不支持。

6. **进度更新**: `axios`可以在上传和下载时提供进度事件的更新，而`fetch`没有这样的内建功能。

7. **拦截器**: `axios`允许你在请求或响应被then或catch处理之前拦截它们，这对于添加一些通用的处理逻辑很有帮助，比如添加认证信息。`fetch`没有这样的内建功能，需要手动封装。

**示例**:

- 错误处理的区别:

使用`fetch`时，处理404错误的示例代码：

```javascript
fetch('/some/url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));
```

使用`axios`时，处理404错误的示例代码：

```javascript
axios.get('/some/url')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器以状态码响应
      console.error('Error response', error.response.status);
    } else if (error.request) {
      // 请求已发出，但未收到回应
      console.error('Error request', error.request);
    } else {
      // 发送请求时出了点问题
      console.error('Error', error.message);
    }
  });
```

在实际应用中，选择`axios`还是`fetch`可能取决于项目的需求，如果需要更多内建的功能并且项目环境允许引入外部库，`axios`可能是一个好选择。如果你希望减少依赖并使用原生API，那么`fetch`可能更适合你。axios和fetch是两种常见的HTTP客户端库，它们都用于在Web应用中发起网络请求。下面是它们之间的一些主要区别：

### 1. 原生支持
- **fetch**：Fetch API是现代浏览器内置的一个原生API，不需要额外安装任何库即可在支持的浏览器中使用。
- **axios**：Axios是一个基于Promise的第三方库，需要通过npm或其他方式安装后才能使用。

### 2. 使用方式
- **fetch**：Fetch的API使用起来更加原生和底层，它不会自动转换JSON数据，需要手动调用`.json()`方法进行转换。
  ```javascript
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));
  ```
- **axios**：Axios自动将响应数据转换为JSON格式，简化了处理过程。
  ```javascript
  axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Axios error:', error));
  ```

### 3. 错误处理
- **fetch**：即使遇到HTTP错误状态（如404或500），fetch也会将promise视为成功解决，只有网络故障或请求阻止才会标记为reject。
- **axios**：在HTTP错误状态下，axios会将promise视为拒绝，这使得错误处理更加直观。

### 4. 超时设置
- **fetch**：原生的fetch API在早期版本中并没有超时设置，需要手动实现超时逻辑。
- **axios**：Axios支持超时设置，可以在请求配置中直接指定超时时间。
  
### 5. 跨平台
- **fetch**：主要用于浏览器环境，虽然有node-fetch这样的库可以在Node.js中模拟Fetch API。
- **axios**：既可以在浏览器中使用，也可以在Node.js环境中使用，更具跨平台性。

### 6. 请求取消
- **fetch**：早期的Fetch API没有提供一个直接的取消正在进行的请求的方法，但现在可以通过`AbortController`接口实现。
- **axios**：支持请求取消，可以通过取消令牌（CancelToken）来实现。

### 7. 请求进度
- **fetch**：不支持监测请求的上传进度。
- **axios**：支持监测上传和下载的进度。

### 8. 安全性
- **fetch**：遵循同源策略，可以通过CORS进行跨源请求。
- **axios**：同样遵循同源策略，也支持CORS。

### 示例
假设我们需要请求一个API并获取用户数据，如果使用fetch，错误处理时需要额外的步骤来判断HTTP状态码。例如：

```javascript
fetch('https://api.example.com/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.status);
    }
    return response.json();
  })
  .then(userData => {
    // 处理用户数据
  })
  .catch(error => {
    // 处理错误情况
  });
```

而在axios中，我们可以便捷地处理异常，因为任何HTTP错误状态都会自动触发catch块：

```javascript
axios.get('https://api.example.com/user')
  .then(response => {
    // 处理用户数据 response.data
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器以状态码出错 response.status
    } else if (error.request) {
      // 请求已发出，但没有接收到回应
    } else {
      // 发生在

Fetch 和 Axios 在功能上非常相似，但为了向后兼容，Axios 似乎工作得更好（例如 fetch 在 IE 11 中不起作用，请查看[这篇文章](https://stackoverflow.com/questions/37258632/react-fetch-not-working-in-ie11)）

另外，如果您使用 JSON 请求，以下是我偶然发现的一些差异。

**获取 JSON post 请求**

    let url = 'https://someurl.com';
    let options = {
                method: 'POST',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                body: JSON.stringify({
                    property_one: value_one,
                    property_two: value_two
                })
            };
    let response = await fetch(url, options);
    let responseOK = response && response.ok;
    if (responseOK) {
        let data = await response.json();
        // do something with data
    }
    

**Axios JSON post 请求**

    let url = 'https://someurl.com';
    let options = {
                method: 'POST',
                url: url,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                data: {
                    property_one: value_one,
                    property_two: value_two
                }
            };
    let response = await axios(options);
    let responseOK = response && response.status === 200 && response.statusText === 'OK';
    if (responseOK) {
        let data = await response.data;
        // do something with data
    }
    

所以：

*   获取的**body** = axios的**数据**
*   Fetch的body必须被**字符串化**，Axios的data包含**对象**
*   Fetch请求对象中**没有url** ，axios请求对象中**有url**
*   fetch请求函数包含**url作为参数**，axios请求函数**不包含url作为参数**。
*   当响应对象包含 ok 属性时**，****获取**请求正常，当**状态为 200**且**statusText 为“OK”**时，Axios 请求**正常**
*   获取 json 对象响应：在 fetch 中调用响应对象上的**json() 函数**，在 Axios 中获取响应对象的**data 属性。**

它们是 HTTP 请求库...

我最终也有同样的疑问，但这篇[文章](http://andrewhfarmer.com/ajax-libraries/)中的表格让我同意`isomorphic-fetch`。但它可以`fetch`与 NodeJS 一起使用。

[http://andrewhfarmer.com/ajax-libraries/](http://andrewhfarmer.com/ajax-libraries/)

* * *

上面的链接已失效同一张表在这里：[https ://www.javascriptstuff.com/ajax-libraries/](https://www.javascriptstuff.com/ajax-libraries/)

或者在这里： [![在此输入图像描述](https://i.stack.imgur.com/qr24s.png)](https://i.stack.imgur.com/qr24s.png)

根据[GitHub 上的](https://github.com/axios/axios/issues/314#issuecomment-217346581)**mzabriskie 的说法** ：[](https://github.com/axios/axios/issues/314#issuecomment-217346581)

> 总体而言，它们非常相似。axios 的一些好处：
> 
> *   转换器：允许在发出请求之前或收到响应之后对数据执行转换
>     
> *   拦截器：允许您完全更改请求或响应（也包括标头）。另外，在发出请求之前或 Promise 结算之前执行异步操作
>     
> *   内置[XSRF](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF))保护
>     

请检查浏览器支持 Axios

[![浏览器支持表](https://i.stack.imgur.com/LHV3m.png)](https://i.stack.imgur.com/LHV3m.png)

我认为你应该使用axios。

fetch API 和 axios API 之间的另一个**主要区别**

*   使用 Service Worker 时，只有当您想拦截 HTTP 请求时，才必须**使用 fetch API**
*   前任。使用 Service Worker 在 PWA 中执行缓存时，如果使用 axios API，则将无法缓存（它仅适用于 fetch API）

1.  Fetch API，需要处理两个 Promise 来获取 JSON 对象属性中的响应数据。而 axios 结果为 JSON 对象。
    
2.  fetch 中的错误处理也不同，因为它不处理 catch 块中的服务器端错误，从 fetch() 返回的 Promise 不会拒绝 HTTP 错误状态，即使响应是 HTTP 404 或 500。相反，它将正常解析（将 ok 状态设置为 false），并且仅在网络故障或任何阻止请求完成的情况下才会拒绝。在 axios 中，您可以捕获 catch 块中的所有错误。
    

我想说使用 axios 更好，可以直接处理拦截器、标头配置、设置 cookie 和错误处理。

[参考这个](https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5)

当谈论 Axios 和 fetch 时，我们谈论的是在JavaScript中进行HTTP请求的两种不同方式。以下是它们之间的几个关键区别：

### 1. 浏览器支持
- **fetch:** 是现代浏览器内置的API，不需要额外的库或框架。`fetch()` 方法已经被所有现代浏览器支持，但不支持IE。
- **Axios:** 是第三方库，需要通过npm安装或者通过添加script标签到HTML。它使用XMLHttpRequests在旧的浏览器中工作，所以对老版本的浏览器有更好的支持。

### 2. JSON 数据处理
- **fetch:** 不会自动转换JSON响应体，需要手动调用`.json()`方法来解析JSON数据。
- **Axios:** 自动将JSON数据转换为JavaScript对象，这意味着你可以直接使用响应数据而无需额外的解析步骤。

### 3. 错误处理
- **fetch:** 即使在HTTP错误响应（例如404或500错误码）时，也会将promise视为已解析（`resolve`），除非网络错误导致请求无法完成。
- **Axios:** 会在返回非2xx的响应码时自动将promise视为被拒绝（`reject`），这使得错误处理更加直接。

### 4. 请求和响应拦截器
- **Axios:** 允许你在请求或响应被`then`或`catch`处理之前拦截它们，可以用于添加通用参数，处理响应等。
- **fetch:** 没有内置的拦截器功能，但可以通过在调用`fetch()`的地方添加逻辑来模拟这种行为。

### 5. 请求取消
- **Axios:** 支持取消正在进行的请求，这是通过使用取消令牌（CancelToken）实现的。
- **fetch:** 原生不支持取消请求，但在现代浏览器中，可以通过AbortController接口来取消fetch请求。

### 6. 请求超时
- **Axios:** 可以直接设置请求的超时时间。
- **fetch:** 原生没有提供设置超时的功能，但可以通过一些额外的代码来实现。

### 7. HTTP接口
- **Axios:** 可以自动转换请求和响应头，处理HTTP状态码，提供更丰富的API配置项。
- **fetch:** API相对简洁，但可能需要编写更多的封装代码来实现同样的功能。

### 例子
假设我们要对一个API端点发起GET请求以获取用户数据：

#### 使用 Axios
```javascript
axios.get('https://api.example.com/users')
  .then(response => {
      console.log(response.data);
  })
  .catch(error => {
      console.error('An error occurred:', error);
  });
```

#### 使用 fetch
```javascript
fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('An error occurred:', error);
  });
```

在这两个例子中，Axios自动处理了JSON的解析而在使用fetch时我们必须手动调用`.json()`。此外，Axios提供更丰富的错误处理，而fetch需要在每个请求中检查`response.ok`。

选择使用哪一种方法主要取决于具体项目的需求、兼容性要求以及开发者的个人喜好。

当然，axios和fetch都是进行HTTP请求的流行工具，它们在JavaScript环境中被用于与服务器进行通信。它们之间有一些关键的区别：

1. **支持的浏览器**: `fetch`是现代浏览器提供的原生API，不需要额外的库就可以使用。然而，一些旧的浏览器并不支持`fetch`。而`axios`是一个第三方库，可以通过npm来安装，并且它用了一些polyfills来确保在所有支持Promise的浏览器中都可以工作。

2. **使用方式**: `fetch`的API使用起来更加原始一些，只提供了基本的功能，这意味着我们在处理JSON数据，处理错误以及设置超时等方面需要写更多的代码。而`axios`提供了一些更高级的功能，比如自动转换JSON数据，拦截请求和响应，以及更容易的错误处理。

3. **错误处理**: `fetch`在请求成功发送并且服务器相应时（即使是404或500这样的HTTP错误状态码）都会resolve，只有在网络故障或请求被阻止时才会reject。这意味着你需要在每个`fetch`调用后检查response.ok属性。而`axios`会在响应状态码落在2xx范围之外时自动reject，这使得错误处理变得更简单。

4. **超时设置**: 在`fetch`中，没有原生的超时设置，你需要实现自己的逻辑来处理超时。而`axios`允许你在请求配置中直接设置`timeout`属性。

5. **请求取消**: `axios`支持取消正在进行的请求，而`fetch`虽然在现代浏览器中支持AbortController来取消请求，但这是一个相对较新的功能，旧浏览器可能不支持。

6. **进度更新**: `axios`可以在上传和下载时提供进度事件的更新，而`fetch`没有这样的内建功能。

7. **拦截器**: `axios`允许你在请求或响应被then或catch处理之前拦截它们，这对于添加一些通用的处理逻辑很有帮助，比如添加认证信息。`fetch`没有这样的内建功能，需要手动封装。

**示例**:

- 错误处理的区别:

使用`fetch`时，处理404错误的示例代码：

```javascript
fetch('/some/url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));
```

使用`axios`时，处理404错误的示例代码：

```javascript
axios.get('/some/url')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器以状态码响应
      console.error('Error response', error.response.status);
    } else if (error.request) {
      // 请求已发出，但未收到回应
      console.error('Error request', error.request);
    } else {
      // 发送请求时出了点问题
      console.error('Error', error.message);
    }
  });
```

在实际应用中，选择`axios`还是`fetch`可能取决于项目的需求，如果需要更多内建的功能并且项目环境允许引入外部库，`axios`可能是一个好选择。如果你希望减少依赖并使用原生API，那么`fetch`可能更适合你。

当然，axios和fetch都是进行HTTP请求的流行工具，它们在JavaScript环境中被用于与服务器进行通信。它们之间有一些关键的区别：

1. **支持的浏览器**: `fetch`是现代浏览器提供的原生API，不需要额外的库就可以使用。然而，一些旧的浏览器并不支持`fetch`。而`axios`是一个第三方库，可以通过npm来安装，并且它用了一些polyfills来确保在所有支持Promise的浏览器中都可以工作。

2. **使用方式**: `fetch`的API使用起来更加原始一些，只提供了基本的功能，这意味着我们在处理JSON数据，处理错误以及设置超时等方面需要写更多的代码。而`axios`提供了一些更高级的功能，比如自动转换JSON数据，拦截请求和响应，以及更容易的错误处理。

3. **错误处理**: `fetch`在请求成功发送并且服务器相应时（即使是404或500这样的HTTP错误状态码）都会resolve，只有在网络故障或请求被阻止时才会reject。这意味着你需要在每个`fetch`调用后检查response.ok属性。而`axios`会在响应状态码落在2xx范围之外时自动reject，这使得错误处理变得更简单。

4. **超时设置**: 在`fetch`中，没有原生的超时设置，你需要实现自己的逻辑来处理超时。而`axios`允许你在请求配置中直接设置`timeout`属性。

5. **请求取消**: `axios`支持取消正在进行的请求，而`fetch`虽然在现代浏览器中支持AbortController来取消请求，但这是一个相对较新的功能，旧浏览器可能不支持。

6. **进度更新**: `axios`可以在上传和下载时提供进度事件的更新，而`fetch`没有这样的内建功能。

7. **拦截器**: `axios`允许你在请求或响应被then或catch处理之前拦截它们，这对于添加一些通用的处理逻辑很有帮助，比如添加认证信息。`fetch`没有这样的内建功能，需要手动封装。

**示例**:

- 错误处理的区别:

使用`fetch`时，处理404错误的示例代码：

```javascript
fetch('/some/url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));
```

使用`axios`时，处理404错误的示例代码：

```javascript
axios.get('/some/url')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器以状态码响应
      console.error('Error response', error.response.status);
    } else if (error.request) {
      // 请求已发出，但未收到回应
      console.error('Error request', error.request);
    } else {
      // 发送请求时出了点问题
      console.error('Error', error.message);
    }
  });
```

在实际应用中，选择`axios`还是`fetch`可能取决于项目的需求，如果需要更多内建的功能并且项目环境允许引入外部库，`axios`可能是一个好选择。如果你希望减少依赖并使用原生API，那么`fetch`可能更适合你。
axios和fetch是两种常见的HTTP客户端库，它们都用于在Web应用中发起网络请求。下面是它们之间的一些主要区别：

### 1. 原生支持
- **fetch**：Fetch API是现代浏览器内置的一个原生API，不需要额外安装任何库即可在支持的浏览器中使用。
- **axios**：Axios是一个基于Promise的第三方库，需要通过npm或其他方式安装后才能使用。

### 2. 使用方式
- **fetch**：Fetch的API使用起来更加原生和底层，它不会自动转换JSON数据，需要手动调用`.json()`方法进行转换。
  ```javascript
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));
  ```
- **axios**：Axios自动将响应数据转换为JSON格式，简化了处理过程。
  ```javascript
  axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Axios error:', error));
  ```

### 3. 错误处理
- **fetch**：即使遇到HTTP错误状态（如404或500），fetch也会将promise视为成功解决，只有网络故障或请求阻止才会标记为reject。
- **axios**：在HTTP错误状态下，axios会将promise视为拒绝，这使得错误处理更加直观。

### 4. 超时设置
- **fetch**：原生的fetch API在早期版本中并没有超时设置，需要手动实现超时逻辑。
- **axios**：Axios支持超时设置，可以在请求配置中直接指定超时时间。
  
### 5. 跨平台
- **fetch**：主要用于浏览器环境，虽然有node-fetch这样的库可以在Node.js中模拟Fetch API。
- **axios**：既可以在浏览器中使用，也可以在Node.js环境中使用，更具跨平台性。

### 6. 请求取消
- **fetch**：早期的Fetch API没有提供一个直接的取消正在进行的请求的方法，但现在可以通过`AbortController`接口实现。
- **axios**：支持请求取消，可以通过取消令牌（CancelToken）来实现。

### 7. 请求进度
- **fetch**：不支持监测请求的上传进度。
- **axios**：支持监测上传和下载的进度。

### 8. 安全性
- **fetch**：遵循同源策略，可以通过CORS进行跨源请求。
- **axios**：同样遵循同源策略，也支持CORS。

### 示例
假设我们需要请求一个API并获取用户数据，如果使用fetch，错误处理时需要额外的步骤来判断HTTP状态码。例如：

```javascript
fetch('https://api.example.com/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.status);
    }
    return response.json();
  })
  .then(userData => {
    // 处理用户数据
  })
  .catch(error => {
    // 处理错误情况
  });
```

而在axios中，我们可以便捷地处理异常，因为任何HTTP错误状态都会自动触发catch块：

```javascript
axios.get('https://api.example.com/user')
  .then(response => {
    // 处理用户数据 response.data
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器以状态码出错 response.status
    } else if (error.request) {
      // 请求已发出，但没有接收到回应
    } else {
      // 发生在

What is difference between axios and fetch

当您使用 JavaScript 的 Axios 库来发送表单数据请求时，您需要使用 `FormData` API 来创建表单数据，并通过 Axios 发送 POST 请求。以下是如何使用 Axios 发送 `FormData` 的步骤：

1. 创建一个 `FormData` 实例。
2. 使用 `append` 方法添加键值对到表单数据中。
3. 配置 Axios 请求，将 `FormData` 实例设置为请求体。
4. 发送请求，并处理响应或者捕获错误。

下面是一个使用 Axios 发送表单数据的示例代码：

```javascript
// 引入 axios
import axios from 'axios';

// 创建 FormData 实例
const formData = new FormData();

// 添加一些键值对数据
formData.append('username', 'johndoe');
formData.append('avatar', fileInput.files[0]); // 假设有一个文件输入

// 配置 Axios 请求
const config = {
  headers: {
    // 必须包含此头部来表明发送的是 multipart/form-data
    'Content-Type': 'multipart/form-data'
  }
};

// 发送 POST 请求
axios.post('https://yourapi.com/upload', formData, config)
  .then((response) => {
    // 请求成功，处理响应
    console.log('Upload successful', response);
  })
  .catch((error) => {
    // 请求失败，处理错误
    console.error('Upload failed', error);
  });
```

在这个例子中，我们首先导入了 Axios 库。创建了一个 `FormData` 对象，并使用 `append` 方法添加了一些键值对数据，其中包括一个用户名和一个文件对象。然后我们配置了 Axios 请求，特别是设置了 `Content-Type` 为 `multipart/form-data`，这是发送包含文件的表单数据时的必要步骤。最后，我们通过 `axios.post` 方法发送请求，并提供了 URL、`formData` 对象和配置对象。请求成功或失败时，我们使用 `.then()` 方法和 `.catch()` 方法来处理响应或错误。

您可以使用[FormData()](https://developer.mozilla.org/en-US/docs/Web/API/FormData)发布 axios 数据，例如：

    var bodyFormData = new FormData();
    

然后将字段添加到要发送的表单中：

    bodyFormData.append('userName', 'Fred');
    

如果您要上传图像，您可能需要使用`.append`

    bodyFormData.append('image', imageFile); 
    

然后就可以使用axios post方法了（可以相应修改）

    axios({
      method: "post",
      url: "myurl",
      data: bodyFormData,
      headers: { "Content-Type": "multipart/form-data" },
    })
      .then(function (response) {
        //handle success
        console.log(response);
      })
      .catch(function (response) {
        //handle error
        console.log(response);
      });
    

相关 GitHub 问题：

[无法获得带有 'Content-Type': 'multipart/form-data' 的 .post 来工作 @ axios/axios](https://github.com/axios/axios/issues/318)

就我而言，我必须将**边界**添加到**标题**中，如下所示：

    const form = new FormData();
    form.append(item.name, fs.createReadStream(pathToFile));
    
    const response = await axios({
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: form,
        headers: {
            'Content-Type': `multipart/form-data; boundary=${form._boundary}`,
        },
    });
    

如果您使用 React Native，此解决方案也很有用。

查看[查询字符串](https://www.npmjs.com/package/querystring)。

您可以按如下方式使用它：

    var querystring = require('querystring');
    axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

上传（多个）二进制文件
===========

Node.js
-------

当您想通过 发布文件`multipart/form-data`（尤其是多个二进制文件）时，事情会变得复杂。下面是一个工作示例：

 const FormData = require('form-data')
 const fs = require('fs')
 const path = require('path')
 
 const formData = new FormData()
 formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
 formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
 await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
 headers: formData.getHeaders()
 })
 

* 而不是`headers: {'Content-Type': 'multipart/form-data' }`我更喜欢`headers: formData.getHeaders()`
* 我使用`async`和`await`上面，如果你不喜欢它们，你可以将它们更改为普通的 Promise 语句
* 为了添加您自己的标题，您只需`headers: { ...yourHeaders, ...formData.getHeaders() }`

* * *

**新增内容如下：**

浏览器
---

浏览器的`FormData`与 NPM 包“form-data”不同。以下代码在浏览器中适用于我：

**HTML：**

 <input type="file" id="image" accept="image/png"/>
 

**JavaScript：**

 const formData = new FormData()
 
 // add a non-binary file
 formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')
 
 // add a binary file
 const element = document.getElementById('image')
 const file = element.files[0]
 formData.append('files[]', file, file.name)
 await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

**2020 ES6 的做法**

将 html 中的表单绑定到数据中，如下所示：

数据：

    form: {
       name: 'Joan Cap de porc',
       email: 'fake@email.com',
       phone: 2323,
       query: 'cap d\ou'
       file: null,
       legal: false
    },
    

提交时：

    async submitForm() {
      const formData = new FormData()
      Object.keys(this.form).forEach((key) => {
        formData.append(key, this.form[key])
      })
    
      try {
        await this.$axios.post('/ajax/contact/contact-us', formData)
        this.$emit('formSent')
      } catch (err) {
        this.errors.push('form_error')
      }
    }

Axios 如何发送 formData?

在使用 Axios 进行 HTTP 请求时，如果请求失败，Axios 会生成一个错误对象。我们可以通过捕获这个错误对象来获取 HTTP 状态码。当请求出错时，Axios 错误对象（通常是 `error`）会包含一个 `response` 属性，它是一个包含了 HTTP 响应信息的对象。`response` 对象进一步包含了 `status` 属性，它就是 HTTP 状态码。

以下是捕获 Axios 错误并从中获取状态码的基本方法：

```javascript
axios.get('/some-endpoint')
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败，处理错误
    if (error.response) {
      // 服务器至少返回了错误代码和消息
      console.log("Error Status Code:", error.response.status);
      console.log("Error Response Data:", error.response.data);
      console.log("Error Response Headers:", error.response.headers);
    } else if (error.request) {
      // 请求已经发出，但是没有收到响应
      console.log("No response received:", error.request);
    } else {
      // 发生了一些在设置请求时触发的错误
      console.log("Error Message:", error.message);
    }
    // 其他错误处理
  });
```

在这段代码中，我们首先尝试对某个端点发起 GET 请求。如果请求成功，我们可以在 `.then()` 部分处理响应。如果请求失败，Axios 会调用 `.catch()` 部分的代码。在 `.catch()` 中，我们首先检查 `error.response` 是否存在。如果存在，我们就可以从中读取状态码，这通常意味着服务器处理了请求但返回了一个错误状态码。如果 `error.response` 不存在，我们还可以检查 `error.request` 来决定下一步的操作。如果 `error.request` 也不存在，那么问题可能是在设置请求时发生的，比如一个无效的 URL。

例如，如果后端服务返回了一个 404 状态码，表示找不到请求的资源，我们就可以在 `error.response.status` 中看到这个状态码。如果返回了 500 状态码，表示服务器内部错误，我们同样可以通过 `error.response.status` 获取到这个信息，并据此采取适当的错误处理措施。

`toString`你看到的是对象的方法返回的字符串`error`。（`error`不是字符串。）

如果从服务器收到响应，该`error`对象将包含以下`response`属性：

    axios.get('/foo')
      .catch(function (error) {
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        }
      });

使用 TypeScript，可以轻松找到所需的正确类型。

这使一切变得更容易，因为您可以通过自动完成获取该类型的所有属性，这样您就可以知道响应和错误的正确结构。

 import { AxiosResponse, AxiosError } from 'axios'
 
 axios.get('foo.example')
 .then((response: AxiosResponse) => {
 // Handle response
 })
 .catch((reason: AxiosError) => {
 if (reason.response!.status === 400) {
 // Handle 400
 } else {
 // Handle else
 }
 console.log(reason.message)
 })
 

此外，您可以将参数传递给这两种类型，以告诉您在内部期望什么，`response.data`如下所示：

 import { AxiosResponse, AxiosError } from 'axios'
 axios.get('foo.example')
 .then((response: AxiosResponse<{user:{name:string}}>) => {
 // Handle response
 })
 .catch((reason: AxiosError<{additionalInfo:string}>) => {
 if (reason.response!.status === 400) {
 // Handle 400
 } else {
 // Handle else
 }
 console.log(reason.message)
 })

`console.log`正如 @Nick 所说，当你使用JavaScript对象时，你看到的结果`Error`取决于 的具体实现`console.log`，这会有所不同，并且（我认为）使得检查错误变得非常烦人。

如果您想`Error`绕过该方法查看完整的对象及其携带的所有信息`toString()`，您可以使用[JSON.stringify](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)：

    axios.get('/foo')
      .catch(function (error) {
        console.log(JSON.stringify(error))
      });

请求配置中有一个名为的新选项`validateStatus`。您可以使用它来指定在 status < 100 或 status > 300 时不抛出异常（默认行为）。例子：

 const {status} = axios.get('foo.example', {validateStatus: () => true})

您可以使用展开运算符 ( `...`) 将其强制转换为新对象，如下所示：

    axios.get('foo.example')
        .then((response) => {})
        .catch((error) => {
            console.log({...error})
    })
    

请注意：这不会是错误的实例。

How can i get the status code from an http error in axios

当我们在使用 `Axios` 进行API调用时，可能需要向服务器发送数组类型的参数。正确处理数组类型的参数依赖于服务器端如何解析参数。一般来说，有几种方式可以提交数组类型的参数：

### 1. 通过查询字符串传递数组
你可以将数组转换为查询字符串的形式，例如：
```
GET /endpoint?param[]=value1&param[]=value2
```
在 Axios 中，你可以简单地将数组直接作为参数传递，Axios 会自动将其序列化为查询字符串：
```javascript
axios.get('/endpoint', {
    params: {
        param: ['value1', 'value2']
    }
});
```
Axios 会将请求转换为 `/endpoint?param=value1&param=value2`。

### 2. 使用 `paramsSerializer` 自定义序列化
如果你需要自定义数组转为查询字符串的方式，可以使用 `paramsSerializer` 函数。例如，你可能想要使用逗号分隔数组：
```javascript
import qs from 'qs'; // 使用 qs 库进行查询字符串的序列化

axios.get('/endpoint', {
    params: {
        param: ['value1', 'value2']
    },
    paramsSerializer: params => {
        return qs.stringify(params, { arrayFormat: 'comma' })
    }
});
```
这会将请求转换为 `/endpoint?param=value1,value2`。

### 3. 在 POST 请求中发送数组作为 JSON
如果你是在发送 `POST` 请求，并且需要在请求体中发送数组，你可以将数组作为 JSON 对象发送：
```javascript
axios.post('/endpoint', {
    arrayParam: ['value1', 'value2']
});
```
这样，数组会作为 JSON 的一部分发送到服务器。

### 例子
假设有一个API端点 `/search` 需要接收一个数组类型的参数 `tags` 来过滤搜索结果。按照查询字符串的方式，我们可以这样调用 API：

```javascript
axios.get('/search', {
    params: {
        tags: ['frontend', 'javascript', 'react']
    }
});
```
如果服务器期望的是逗号分隔的字符串而不是多个相同的键，我们可以用 `paramsSerializer` 自定义序列化方法：
```javascript
import qs from 'qs';

axios.get('/search', {
    params: {
        tags: ['frontend', 'javascript', 'react']
    },
    paramsSerializer: params => {
        return qs.stringify(params, { arrayFormat: 'comma' });
    }
});
```

上述方法都是处理发送数组类型参数时的常见方式，具体使用哪种方法取决于后端API的预期格式，所以在实际应用中，应当根据服务器端的要求来选择合适的数组序列化方式。

You can use `paramsSerializer` and serialize parameters with [https://www.npmjs.com/package/qs](https://www.npmjs.com/package/qs)

    axios.get('/myController/myAction', {
      params: {
        storeIds: [1,2,3]
      },
      paramsSerializer: params => {
        return qs.stringify(params)
      }
    })

Without having to add more libraries and using ES6 you could write:

    axios.get(`/myController/myAction?${[1,2,3].map((n, index) => `storeIds[${index}]=${n}`).join('&')}`);

Thanks so much the answer from **Nicu Criste**, for my case, the API requires params like this:

    params: {
      f: {
        key: 'abc',
        categories: ['a','b','c']
       },
      per_page: 10
    }
    

Method is GET and this API requires the format is: `API?f[key]=abc&f[categories][]=a&f[categories][]=b...` So I assigned the paramsSerializer of axios like this:

    config.paramsSerializer = p => {
          return qs.stringify(p, {arrayFormat: 'brackets'})
        }
    

*   Install `qs` please go to [this link](https://www.npmjs.com/package/qs)  
    
*   Read more about paramsSerializer in [axios document](https://github.com/axios/axios#request-config)
*   Edit format of params: Read more at [qs stringifying document](https://www.npmjs.com/package/qs#stringifying)

This behaviour has been added to `axios` starting with version `1.0.0`. See `paramsSerializer.indexes` at [https://github.com/axios/axios/tree/v1.0.0#request-config](https://github.com/axios/axios/tree/v1.0.0#request-config)

Here's an example using your sample code:

    axios.get('/myController/myAction', {
      params: { storeIds: [1,2,3] },
      paramsSerializer: {
        indexes: true, // use brackets with indexes
      }
    )
    

The resulting query params will have indexes inside the brackets:

    /myController/myAction?storeIds[0]=1&storeIds[1]=2&storeIds[2]=3
    

Other `paramsSerializer.indexes` values are `null` (no brackets):

    axios.get('/myController/myAction', {
      params: { storeIds: [1,2,3] },
      paramsSerializer: {
        indexes: null, // no brackets at all
      }
    )
    // /myController/myAction?storeIds=1&storeIds=2&storeIds=3
    

And the default `false` (brackets without indexes):

    axios.get('/myController/myAction', {
      params: { storeIds: [1,2,3] },
      paramsSerializer: {
        indexes: false, // brackets but no indexes
      }
    )
    // /myController/myAction?storeIds[]=1&storeIds[]=2&storeIds[]=3

In my case, I use ES6 array function. array element make querystring use reduce function. Object array also works.

    const storeIds = [1,2,3]
    axios.get('some url', {
      params: {
        storeIds: storeIds.reduce((f, s) => `${f},${s}`)
      }
    })

You can use <code>paramsSerializer</code> and serialize parameters with <a href="https://www.npmjs.com/package/qs" rel="noreferrer">https://www.npmjs.com/package/qs</a>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">axios.get('/myController/myAction', {
 params: {
 storeIds: [1,2,3]
 },
 paramsSerializer: params =&gt; {
 return qs.stringify(params)
 }
})
</code></pre>

This behaviour has been added to <code>axios</code> starting with version <code>1.0.0</code>. See <code>paramsSerializer.indexes</code> at <a href="https://github.com/axios/axios/tree/v1.0.0#request-config" rel="noreferrer">https://github.com/axios/axios/tree/v1.0.0#request-config</a>
Here's an example using your sample code:
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">axios.get('/myController/myAction', {
 params: { storeIds: [1,2,3] },
 paramsSerializer: {
 indexes: true, // use brackets with indexes
 }
)
</code></pre>
The resulting query params will have indexes inside the brackets:
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">/myController/myAction?storeIds[0]=1&amp;storeIds[1]=2&amp;storeIds[2]=3
</code></pre>
Other <code>paramsSerializer.indexes</code> values are <code>null</code> (no brackets):
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">axios.get('/myController/myAction', {
 params: { storeIds: [1,2,3] },
 paramsSerializer: {
 indexes: null, // no brackets at all
 }
)
// /myController/myAction?storeIds=1&amp;storeIds=2&amp;storeIds=3
</code></pre>
And the default <code>false</code> (brackets without indexes):
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">axios.get('/myController/myAction', {
 params: { storeIds: [1,2,3] },
 paramsSerializer: {
 indexes: false, // brackets but no indexes
 }
)
// /myController/myAction?storeIds[]=1&amp;storeIds[]=2&amp;storeIds[]=3
</code></pre>

Without having to add more libraries and using ES6 you could write:
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">axios.get(`/myController/myAction?${[1,2,3].map((n, index) =&gt; `storeIds[${index}]=${n}`).join('&amp;')}`);
</code></pre>

Thanks so much the answer from Nicu Criste, for my case, the API requires params like this:

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">params: {
 f: {
 key: 'abc',
 categories: ['a','b','c']
 },
 per_page: 10
}
</code></pre>

Method is GET and this API requires the format is: <code>API?f[key]=abc&amp;f[categories][]=a&amp;f[categories][]=b...</code>
So I assigned the paramsSerializer of axios like this:

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">config.paramsSerializer = p =&gt; {
 return qs.stringify(p, {arrayFormat: 'brackets'})
 }
</code></pre>

<ul>
<li>Install <code>qs</code> please go to <a href="https://www.npmjs.com/package/qs" rel="noreferrer">this link</a>
 </li>
<li>Read more about paramsSerializer in <a href="https://github.com/axios/axios#request-config" rel="noreferrer">axios document</a></li>
<li>Edit format of params: Read more at <a href="https://www.npmjs.com/package/qs#stringifying" rel="noreferrer">qs stringifying document</a></li>
</ul>

In my case, I use ES6 array function. 
array element make querystring use reduce function.
Object array also works.

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">const storeIds = [1,2,3]
axios.get('some url', {
 params: {
 storeIds: storeIds.reduce((f, s) =&gt; `${f},${s}`)
 }
})
</code></pre>

There are a lot of good answers here. But I just wanted to share what I ended up using: (works like a charm even with other non-array parameters in your object)
Here is my params object:
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">params: {
 city: '335471',
 size: 4,
 page: 1,
 type: [1, 2, 3, 4, 5, 6],
}
</code></pre>
This is the axios get method:
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">$axios.get('/some/api/endpoint/', {
 params,
 paramsSerializer: (params) =&gt; parseParams(params),
})
</code></pre>
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">function parseParams(params) {
 const keys = Object.keys(params)
 let options = ''

 keys.forEach((key) =&gt; {
 const isParamTypeObject = typeof params[key] === 'object'
 const isParamTypeArray = isParamTypeObject &amp;&amp; params[key].length &gt;= 0

 if (!isParamTypeObject) {
 options += `${key}=${params[key]}&amp;`
 }

 if (isParamTypeObject &amp;&amp; isParamTypeArray) {
 params[key].forEach((element) =&gt; {
 options += `${key}=${element}&amp;`
 })
 }
 })

 return options ? options.slice(0, -1) : options
}
</code></pre>
And finally, using this method you will send this request:
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">https://yourwebsite.com/api/some/api/endpoint/?city=335471&amp;size=4&amp;page=1&amp;type=1&amp;type=2&amp;type=3&amp;type=4&amp;type=5&amp;type=6
</code></pre>
source: <a href="https://github.com/axios/axios/issues/604#issuecomment-420135579" rel="nofollow noreferrer">https://github.com/axios/axios/issues/604#issuecomment-420135579</a>

you can create a function as <code>parseParams</code> that can send the params to this function and serialize it.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">axios.get('/myController/myAction', {
 params: {
 storeIds: [1,2,3]
 },
 paramsSerializer: params =&gt; parseParams(params)
})</code></pre>
<div class="snippet-result"><div class="snippet-ctas"><button type="button" class="s-btn s-btn__filled"><svg aria-hidden="true" class="svg-icon iconPlay" width="17" height="18" viewBox="0 0 17 18"><path d="M3 2.87a1 1 0 0 1 1.55-.83l9.2 6.13a1 1 0 0 1 0 1.66l-9.2 6.13A1 1 0 0 1 3 15.13z"></path></svg> Run code snippet</button><input class="copySnippet s-btn s-btn__outlined" type="button" value="Copy snippet to answer"><button type="button" class="s-btn hideResults" style="display: none;">Hide results</button><div class="popout-code"><a class="snippet-expand-link">Expand snippet</a></div></div><div class="snippet-result-code" style="display: none;"><iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe></div></div></div>
</div>

parseParams function is;
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">export const parseParams = (params) =&gt; {
 let options = '';

 for (const [key, value] of Object.entries(params)) {
 if (Array.isArray(value)) {
 for (const element of value) {
 options += `${key}=${element}&amp;`;
 }
 } else {
 options += `${key}=${value}&amp;`;
 }
 }

 return options.slice(0, -1);
};</code></pre>
<div class="snippet-result"><div class="snippet-ctas"><button type="button" class="s-btn s-btn__filled"><svg aria-hidden="true" class="svg-icon iconPlay" width="17" height="18" viewBox="0 0 17 18"><path d="M3 2.87a1 1 0 0 1 1.55-.83l9.2 6.13a1 1 0 0 1 0 1.66l-9.2 6.13A1 1 0 0 1 3 15.13z"></path></svg> Run code snippet</button><input class="copySnippet s-btn s-btn__outlined" type="button" value="Copy snippet to answer"><button type="button" class="s-btn hideResults" style="display: none;">Hide results</button><div class="popout-code"><a class="snippet-expand-link">Expand snippet</a></div></div><div class="snippet-result-code" style="display: none;"><iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe></div></div></div>
</div>

I rewrote the existing paramSerializer shipped in axios. The following snippet does the same serialization while putting indices between square brackets. I tried qs but it is not compatible with my python connexion backend (for JSON string parameters).
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">const rcg = axios.create({
 baseURL: `${url}/api`,
 paramsSerializer: params =&gt; {
 const parts = [];

 const encode = val =&gt; {
 return encodeURIComponent(val).replace(/%3A/gi, ':')
 .replace(/%24/g, '$')
 .replace(/%2C/gi, ',')
 .replace(/%20/g, '+')
 .replace(/%5B/gi, '[')
 .replace(/%5D/gi, ']');
 }

 const convertPart = (key, val) =&gt; {
 if (val instanceof Date)
 val = val.toISOString()
 else if (val instanceof Object)
 val = JSON.stringify(val)

 parts.push(encode(key) + '=' + encode(val));
 }

 Object.entries(params).forEach(([key, val]) =&gt; {
 if (val === null || typeof val === 'undefined')
 return

 if (Array.isArray(val))
 val.forEach((v, i) =&gt; convertPart(`${key}[${i}]`, v))
 else
 convertPart(key, val)
 })

 return parts.join('&amp;')
 }
});
</code></pre>

In my case, I am using someting like this

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">const params = array.map((v)=&gt;{
 return `p=${v}&amp;`
 })
</code></pre>

Only concat <code>params.join('')</code> to the URL where you get data:

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">`url_to_get?${params.join('')`
</code></pre>

In my back-end in ASP.net I receive this

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">[FromUri] string [] p
</code></pre>

This answer is inspired by <a href="https://stackoverflow.com/a/51444749/7135309">@Nicu Criste's answer</a>.
But might be not related to the posted question.
The following code was used to generate the query params with repetitive keys which had been supplied with an object array.
Note: If you are a developer with <a href="https://bundlephobia.com/" rel="nofollow noreferrer">bundlephobia</a>, use the following approach with care: as with <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams" rel="nofollow noreferrer">UrlSearchParams</a> <a href="https://caniuse.com/?search=urlsearchparams" rel="nofollow noreferrer">support varies on different browsers and platforms</a>.
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">const queryParams = [{key1: "value1"}, {key2: "value2"}]

axios.get('/myController/myAction', {
 params: queryParams,
 paramsSerializer: params =&gt; {
 return params.map((keyValuePair) =&gt; new URLSearchParams(keyValuePair)).join("&amp;")
 }
})

// request -&gt; /myController/myAction?key1=value1&amp;key2=value2
</code></pre>

Axios相关问题