前端axios请求接口

### 使用 Axios 进行 API 请求 在前端项目中使用 Axios 发起 API 请求相对简单。以下是具体方法： #### 导入 Axios 并发起 GET 请求 对于简单的 GET 请求，可以按照如下方式操作[^1]: ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => { console.log('请求成功', response.data); }) .catch(error => { console.error('请求失败', error); }); ``` 这段代码展示了如何导入 `axios` 模块并调用其 `.get()` 方法来获取数据。 #### 安装 Axios 和基本配置 如果尚未安装 Axios，则需通过 npm 或 yarn 来安装它: ```bash npm install axios ``` 之后可以在项目的入口文件或其他合适位置设置一些全局默认参数，比如超时时间和基础 URL 等[^3]: ```javascript // 设置全局默认值 axios.defaults.timeout = 2000; axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN'; axios.defaults.baseURL = 'http://localhost:5000'; ``` 这样做的好处是可以减少每次请求时重复输入相同的信息。 #### 创建自定义实例 为了更好地管理和维护不同类型的请求，还可以基于特定配置创建新的 Axios 实例: ```javascript const customAxiosInstance = axios.create({ baseURL: 'https://api.customservice.com', headers: {'X-Custom-Header': 'foobar'} }); ``` 这允许为不同的服务或环境定制专属的行为模式而不影响其他部分的功能。 #### 处理 POST 请求及上传/下载文件 当涉及到发送表单数据或者处理文件传输时，POST 请求就显得尤为重要了。这里给出一个用于提交 JSON 数据的例子以及从服务器接收二进制流作为响应的情况下的解决方案[^4]: ```javascript // 提交JSON数据到API端点 customAxiosInstance.post('/submit-data', { key: "value" }, { responseType: 'json' }) .then((response) => { // 成功后的逻辑... }); // 下载文件 function downloadFile(url, params) { const config = { method: 'post', url, data: qs.stringify(params), responseType: 'blob' // 表明这是一个二进制文件而非纯文本 }; return axios(config).then(({data})=>{ let link=document.createElement('a'); link.href=window.URL.createObjectURL(new Blob([data])); link.download="filename.ext"; // 文件名可以根据实际情况调整 document.body.appendChild(link); link.click(); setTimeout(() => { window.URL.revokeObjectURL(link.href); // 清除临时链接对象 document.body.removeChild(link); }, 100); }).catch(err=>console.warn(`Error downloading file ${err}`)); } ``` 上述例子不仅涵盖了常规的数据交互场景，还特别针对文件下载提供了实用的技术方案。