vue 项目中常用的 2 个 Ajax 库及简单使用示例

npm install axios

import axios from 'axios'
axios.get('https://api.example.com/users')
  .then(response => {
    console.log('用户列表:', response.data)
  })
  .catch(error => {
    console.error('请求失败:', error)
  })

axios.post('https://api.example.com/login', {
  username: 'admin',
  password: '123456'
})
.then(res => {
  console.log('登录成功:', res.data)
})
.catch(err => {
  console.error('登录失败:', err)
})

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log('用户列表:', data)
  })
  .catch(err => {
    console.error('请求失败:', err)
  })

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'admin',
    password: '123456'
  })
})
.then(response => response.json())
.then(data => {
  console.log('登录成功:', data)
})
.catch(err => {
  console.error('登录失败:', err)
})

// utils/request.js
import axios from 'axios'
const service = axios.create({
  baseURL: '/api', // 所有请求默认添加 /api 前缀
  timeout: 5000,  // 超时时间
})
// 请求拦截器
service.interceptors.request.use(config => {
  // 可在此添加 token、loading 等操作
  return config
}, error => {
  return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
  // 统一处理响应数据
  return response.data
}, error => {
  // 统一错误提示
  console.error('请求出错:', error)
  return Promise.reject(error)
})
export default service

import request from '@/utils/request'
export default {
  methods: {
    async fetchUsers() {
      try {
        const users = await request.get('/users')
        console.log('用户数据:', users)
      } catch (err) {
        alert('获取用户失败')
      }
    }
  }
}