axios封装get携带参数
时间: 2024-06-26 17:01:43 浏览: 10
Axios是一个流行的基于Promise的HTTP客户端,用于浏览器和Node.js环境。为了方便在项目中处理GET请求并携带参数,你可以创建一个封装函数来简化这个过程。以下是一个简单的封装示例:
```javascript
// 引入axios库
const axios = require('axios');
// 封装的get函数
function get(url, params) {
// 使用axios.get方法,并添加查询参数到URL(如果params对象非空)
return axios.get(url, {
params: params ? { ...params } : {}, // 如果params是一个对象,合并到URL,否则直接使用空对象
// 可以设置其他默认配置,如headers、baseURL等
});
}
// 使用示例
async function fetchData() {
try {
const response = await get('https://api.example.com/data', {
key: 'value',
param2: 'anotherValue'
});
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// 调用函数
fetchData();
```
相关问题
axios发送封装的get请求并携带params
要使用封装的axios发送get请求并携带params参数,你可以按照以下步骤进行操作:
1. 在需要的组件中导入封装的axios:`import Axios from './request/axios';`
2. 在发送请求的函数中使用axios的get方法,并传递参数params:
```javascript
Axios.get('http://localhost:9090/user/login', {
params: {
account: this.formLogin.account,
password: this.formLogin.password,
testParam: 'hello world'
}
}).then(res => {
// 处理响应数据
}).catch(error => {
// 处理错误
});
```
请注意,这里的`this.formLogin.account`、`this.formLogin.password`和`'hello world'`是示例参数,你需要根据实际情况替换成你要发送的参数。
这样就可以使用封装的axios发送get请求并携带params参数了。
#### 引用[.reference_title]
- *1* *2* [vue3中封装Axios请求](https://blog.csdn.net/weixin_52797441/article/details/126979875)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue使用axios发送get请求并携带参数](https://blog.csdn.net/weixin_46713508/article/details/128839202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
vue的axios封装
axios是一个基于Promise用于浏览器和node.js的HTTP客户端,可以用于实现HTTP请求和响应。下面是一种简单的Vue的axios封装:
1. 创建一个axios实例
```javascript
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
```
2. 添加请求拦截器
```javascript
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
if (store.getters.token) {
// 让每个请求携带token
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
}
)
```
3. 添加响应拦截器
```javascript
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// token失效
MessageBox.confirm(
'你已经被登出,可以取消继续留在该页面,或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 重载页面
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
```
4. 封装get和post方法
```javascript
export function fetch(url, params) {
return new Promise((resolve, reject) => {
service.get(url, {
params: params
}).then(response => {
resolve(response.data)
}).catch(err => {
reject(err)
})
})
}
export function post(url, data) {
return new Promise((resolve, reject) => {
service.post(url, data).then(response => {
resolve(response.data)
}).catch(err => {
reject(err)
})
})
}
```
这就是一个简单的Vue的axios封装。你可以根据自己的需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)