vue2 axios使用

在 Vue2 中，axios 与后端进行交互。它支持 Promise API，可拦截请求和响应，转换请求 / 响应数据，并且能在浏览器和 Node.js 环境中使用

安装 axios

npm install axios --save

一、封装接口请求

 

先封装 axios 实例和接口方法，便于统一管理和复用。

1. 创建 axios 实例（src/utils/request.js）

import axios from 'axios'
// 创建axios实例
const service = axios.create({
        // axios中请求配置有baseURL选项，表示请求URL公共部分
        baseURL: process.env.VUE_APP_BASE_API,
        // 超时
        timeout: 300000,
        headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'Content-Security-Policy': "default-src 'self'",
            'X-Content-Type-Options': 'nosniff',
            'X-XSS-Protection': 1
        }
    })

 

请求拦截器（处理请求前逻辑）

// 在 request.js 中添加请求拦截器
service.interceptors.request.use(
  config => {
    // 示例：给请求头添加 token（从 localStorage 中获取）
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    // 示例：显示加载动画（需配合 UI 库实现）
    // loading.show()
    return config // 必须返回 config，否则请求会中断
  },
  error => {
    // 请求错误时的处理（如关闭加载动画）
    // loading.hide()
    console.error('请求拦截器错误：', error)
    return Promise.reject(error)
  }
)

 响应拦截器（处理响应后逻辑）

// 在 request.js 中添加响应拦截器
service.interceptors.response.use(
  response => {
    // 响应成功时的处理（如关闭加载动画）
    // loading.hide()
    // 假设后端接口统一返回格式：{ code: 200, data: {}, msg: '' }
    const res = response.data
    if (res.code !== 200) {
      // 非成功状态（如 code=401 未登录、code=500 服务器错误）
      Message.error(res.msg || '请求失败')
      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      // 成功状态，直接返回 data（简化组件中获取数据的逻辑）
      return res.data
    }
  },
  error => {
    // 响应错误时的处理（如网络错误、超时）
    // loading.hide()
    if (error.message.includes('timeout')) {
      Message.error('请求超时，请重试')
    } else if (error.response) {
      // 服务器返回错误状态码（如 404、500）
      const status = error.response.status
      Message.error(`请求错误：${status}`)
    } else {
      Message.error('网络错误，请检查网络')
    }
    return Promise.reject(error)
  }
)

 

定义接口方法（src/api/user.js）

import { service as request} from '@/utils/request'

// get方式
export function getUserList(params) {
  return request({
    url: '/xxxx/xx',
    method:'GET',

    params

  }) 
}

// post方式
export function createUser(data) { 

   return request({
       url: '/xxxx/xx',
       method:'GET',

       data

  }) 
}

.....

在组件中使用 async/await 调用接口

在组件的方法中，用 async 标记函数，用 await 等待接口返回结果，并通过 try/catch 处理错误。

import {
 getUserList
} from "@/api/user.js";

<template>
  <div>
    <button @click="fetchUsers">获取用户列表</button>
    <button @click="addUser">创建用户</button>
  </div>
</template>

<script>
import { userApi } from '@/api/user' // 导入接口方法

export default {
  data() {
    return {
      userList: [],
      loading: false // 加载状态
    }
  },
  methods: {
    // 获取用户列表（GET 请求）
    async fetchUsers() {
      this.loading = true // 显示加载状态
      try {
        // 调用接口，await 等待结果
        const data = await userApi.getUserList({ page: 1, size: 10 })
        this.userList = data.list // 赋值数据
        console.log('用户列表：', data)
      } catch (error) {
        console.error('获取用户失败：', error)
        // 错误已在拦截器处理，这里可补充逻辑
      } finally {
        this.loading = false // 无论成功失败，关闭加载状态
      }
    },

    // 创建用户（POST 请求）
    async addUser() {
      const userData = { name: '张三', age: 25 } // 要提交的数据
      try {
        const result = await userApi.createUser(userData)
        this.$message.success('用户创建成功')
        console.log('创建结果：', result)
        this.fetchUsers() // 重新获取列表
      } catch (error) {
        console.error('创建用户失败：', error)
      }
    }
  }
}
</script>

 

 vuex使用

actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim();
      const password = userInfo.password; 

     return new Promise((resolve, reject) => {
        login(username, password)
          .then((res) => { 
            setToken(res.token);
            commit("SET_TOKEN", res.token); 
            Cookies.set("_username", username); 
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

 

 组件页面调用

this.$store..dispatch("Login", md5LoginFrom)  .then(() => {..})