axios 前端请求接口方式

本文详细介绍了使用Axios库进行GET和POST请求的方法,包括如何传递接口参数,无论是作为值还是对象,以及如何处理请求的成功响应和错误。对于GET请求,展示了参数拼接和使用$.param的方式;对于POST请求,则解释了如何发送对象集合和单个参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、get请求

1、接口参数为值

axios.get('http://127.0.0.1:8090/news/_id?' + id).then(res => {
// ... to do
}).catch(err => {
console.log(err)
})

2、接口参数为对象

let params = {Guid: 'xxx'};
axios.get('xxx?' + $.param(params)).then(res => {
// ... to do
}).catch(err => {
// ... to do
})
二、post请求

1、接口参数为对象集合

let model = [];
mode.push({
	Guid: 'xxx'
});
axios.post('xxx', {list: model}).then(res => {
// ... to do
}).catch(err => {
// ... to do
})

2、接口单个参数

axios.post('xxx', {Guid: 'xx'}).then(res => {
// ... to do
}).catch(err => {
// ... to do
})
### 使用 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}`)); } ``` 上述例子不仅涵盖了常规的数据交互场景,还特别针对文件下载提供了实用的技术方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值