封装一个适用于 Vue 和 React 以及其他支持 axios 的框架

记录一个简单的 axios 封装代码。

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

instance.interceptors.request.use(config => {
  // 在发送请求之前做些处理
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  // 发送请求错误处理
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  // 对响应数据做些处理
  return response.data
}, error => {
  // 响应错误处理
  return Promise.reject(error)
})

const api = {
  get(url, data) {
    return instance.get(url, { params: data })
  },
  post(url, data) {
    return instance.post(url, data)
  },
  put(url, data) {
    return instance.put(url, data)
  },
  delete(url, data) {
    return instance.delete(url, { params: data })
  }
}

export default api

这是一个基本的 axios 封装，支持设置请求头、请求超时时间、Token 验证等。同时，我们把 get、post、put、delete 方法写成了一个对象形式，方便进行链式调用，使用示例：

import api from './api'

api.get('/users', { page: 1, limit: 10 }).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

api.post('/login', { username: 'admin', password: '123456' }).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

这样就可以方便地在项目中使用 axios 了，适用于 Vue 和 React 以及其他支持 axios 的框架。