axios 封装get和调用get
时间: 2024-01-17 10:05:40 浏览: 25
封装get:
```javascript
import axios from 'axios';
const get = (url, params) => {
return axios.get(url, { params });
};
export default get;
```
调用get:
```javascript
import get from './get';
get('/api/data', { id: 1 }).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
```
相关问题
axios封装get携带参数
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封装Ajax调用数据接口
好的,以下是一个基于axios封装的Ajax调用数据接口的示例:
```javascript
import axios from 'axios';
const request = axios.create({
baseURL: 'https://api.example.com', // 接口的基础路径
timeout: 5000, // 请求超时时间
});
// 请求拦截器
request.interceptors.request.use(config => {
// 在发送请求之前做些什么,比如添加token
config.headers.Authorization = 'Bearer ' + getToken();
return config;
}, error => {
// 对请求错误做些什么
console.error('请求拦截器错误:', error);
return Promise.reject(error);
});
// 响应拦截器
request.interceptors.response.use(response => {
// 对响应数据做些什么,比如处理错误状态码
if (response.status !== 200) {
console.error('响应状态码错误:', response.status);
return Promise.reject(new Error('响应状态码错误'));
}
return response.data;
}, error => {
// 对响应错误做些什么
console.error('响应拦截器错误:', error);
return Promise.reject(error);
});
export default request;
// 调用接口
import request from '@/utils/request';
request({
method: 'get',
url: '/api/user',
params: {
id: 1
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
```
以上代码中,我们通过axios.create()方法创建了一个axios实例,然后定义了请求拦截器和响应拦截器,在发送请求之前可以在请求头中添加token,对响应数据也可以进行一些处理。最后我们导出了这个axios实例,并在调用接口时使用。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.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)