封装axios

65 阅读1分钟

封装axios的方法如下:

  1. 在页面引入axios:import axios from 'axios'。
  2. 创建一个axios的实例:const instance = axios.create({baseURL:'', timeout: 10000})。
  3. 设置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);  
  });