Vue入门到精通六之一个简单的请求HTTP接口

Vue中发送HTTP请求有多种方式，推荐使用axios。

一、使用 axios（推荐）

1. 安装 axios

bash 复制代码

npm install axios
# 或
yarn add axios
# 或
pnpm add axios

2. 基础用法

javascript 复制代码

import axios from 'axios'

// GET 请求
axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

// POST 请求
axios.post('/api/users', {
  name: '张三',
  age: 25
})
  .then(response => {
    console.log(response.data)
  })

// PUT 请求
axios.put('/api/users/1', {
  name: '李四'
})

// DELETE 请求
axios.delete('/api/users/1')

3. 封装 axios（推荐）

javascript 复制代码

// utils/request.js
import axios from 'axios'
import { message } from 'ant-design-vue'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || '/api', // 基础URL
  timeout: 10000, // 请求超时时间
  withCredentials: true, // 跨域携带cookie
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log('请求错误：', error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = res
// 假设后端返回格式：{ code: 200, message: 'success', data: {} }
    if (res.code !== 200) {
      message.error(res.message || '请求失败')
      
      // 401: 未登录或token过期
      if (res.code === 401) {
        // 跳转到登录页
        window.location.href = '/login'
      }
      
      return Promise.reject(new Error(res.message || '请求失败'))
    }
    
    return res
  },
  error => {
    // 对响应错误做点什么
    console.log('响应错误：', error)
    
    if (error.response) {
      switch (error.response.status) {
        case 400:
          message.error('请求参数错误')
          break
        case 401:
          message.error('未授权，请重新登录')
          // 跳转登录页
          break
        case 403:
          message.error('拒绝访问')
          break
        case 404:
          message.error('请求的资源不存在')
          break
        case 500:
          message.error('服务器内部错误')
          break
        default:
          message.error('请求失败')
      }
    } else {
      message.error('网络连接失败')
    }
    
    return Promise.reject(error)
  }
)

export default service

二、API 接口管理

javascript 复制代码

// api/appConfig.js
import request from '@/utils/request'

// 获取列表
export function getAppConfigList(params) {
  return request({
    url: '/app-config/list',
    method: 'get',
    params
  })
}

// 获取详情
export function getAppConfigDetail(id) {
  return request({
    url: `/app-config/${id}`,
    method: 'get'
  })
}

// 新增
export function createAppConfig(data) {
  return request({
    url: '/app-config',
    method: 'post',
    data
  })
}

// 更新
export function updateAppConfig(id, data) {
  return request({
    url: `/app-config/${id}`,
    method: 'put',
    data
  })
}

// 删除
export function deleteAppConfig(id) {
  return request({
    url: `/app-config/${id}`,
    method: 'delete'
  })
}

// 批量删除
export function batchDeleteAppConfig(ids) {
  return request({
    url: '/app-config/batch',
    method: 'delete',
    data: { ids }
  })
}

三、栗子

html 复制代码

<template>
    <div></div>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
</template>

<script lang="ts">
import axios from 'axios'
    export default {
        name : 'Person',
        data() {
            return {
                name :'',
                age : '',
            }
        },
        mounted() {
            this.loading();
        },
        methods: {
            showTel() {
                //alert(this.tel)
            },
            loading() {
                   axios.get('/api/getUser').then(response => {
                           this.name = response.data.name;
                           this.age = response.data.age;
                        }).catch(error => {
                        console.error(error)
                    })

            }
        }
    }
</script>

<style scoped>
</style>

运行效果：