封装axios的方法如下:
- 在页面引入axios:import axios from 'axios'。
- 创建一个axios的实例:const instance = axios.create({baseURL:'', timeout: 10000})。
- 设置axios的请求拦截器和响应拦截器。请求拦截器可以在请求信息处理之前进行处理,例如对请求的信息进行错误处理或返回特定的信息。响应拦截器可以在响应信息处理之后进行处理,例如对响应的状态码进行判断并返回特定的信息。
以下是一个简单的示例,展示如何封装axios并使用请求拦截器和响应拦截器:
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL
timeout: 10000 // 设置请求超时时间
});
// 请求拦截器
instance.interceptors.request.use((config) => {
// 在发送请求之前做些什么,例如设置统一的请求头信息
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
}, (error) => {
// 如果请求发生错误,抛出错误信息
console.error('Request error:', error);
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use((response) => {
// 对响应数据做统一处理,例如解析JSON数据
return response.data;
}, (error) => {
// 如果响应发生错误,抛出错误信息
console.error('Response error:', error);
return Promise.reject(error);
});
// 封装一个发送GET请求的方法
function get(url, params) {
return instance.get(url, { params });
}
// 使用封装好的axios实例发送GET请求,并处理返回结果
get('/users', { page: 1, limit: 10 })
.then(data => {
console.log('Users data:', data);
})
.catch(error => {
console.error('Request error:', error);
});