Axios在Vue.js

这个作业属于哪个课程	软件工程实践-2023 学年-W 班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	课程回顾与总结、个人技术总结
其他参考文献	《构建之法》

一、Axios

1.1 Axios概述

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。它是现代 Web 开发中非常流行的库之一，因为它提供了简洁的 API 和丰富的功能，使得发送 HTTP 请求变得更加容易和可靠。

• 基于 Promise：Axios 的所有请求都返回一个 Promise 对象，这使得你可以使用 .then() 和 .catch() 方法来处理异步操作，或者使用 async/await 语法来简化代码。
• 支持浏览器和 Node.js：Axios 可以在浏览器和 Node.js 环境中运行，这使得它成为了一个跨平台的 HTTP 客户端库。
• 拦截器：Axios 提供了请求拦截器和响应拦截器的功能，你可以在请求发送前或响应返回后对它们进行修改或处理。
• 取消请求：Axios 支持取消正在进行的请求，这对于需要中断请求的场景非常有用。
• 转换请求和响应数据：你可以对请求和响应数据进行转换，例如将 JSON 数据转换为 JavaScript 对象。
• 客户端支持防止 CSRF：Axios 支持在请求头中添加 CSRF token，以防止跨站请求伪造（CSRF）攻击。
• 安全性：Axios 遵循 HTTPS 协议，并支持 HTTP/2，提供了更好的安全性和性能。

1.2 Axios安装

Axios安装方法

1.3 在 Vue 组件中使用 Axios

以下截取自实践作业代码片段。

1.3.1 用methods来定义发送 HTTP 请求的函数。

<template>
  <div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
  </div>
</template>

<script>
export default {
  name: 'validCode',
  data () {
    return {
      length: 4,
      codeList: []
    }
  },
  mounted () {
    this.createdCode()
  },
  methods: {
    refreshCode () {
      this.createdCode()
    },
    createdCode () {
      let len = this.length,
          codeList = [],
          chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
          charsLen = chars.length
      // 生成
      for (let i = 0; i < len; i++) {
        let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
        })
      }
      // 指向
      this.codeList = codeList
      // 将当前数据派发出去
      this.$emit('update:value', codeList.map(item => item.code).join(''))
    },
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    }
  }
}
</script>

1.3.2 使用 async/await 语法来简化异步代码。

<script>  
import axios from 'axios';  
  
export default {  
  async methods: {  
    async fetchData() {  
      try {  
        const response = await axios.get('http://82.157.195.112:9090/data');  
        this.data = response.data;  
      } catch (error) {  
        console.error(error);  
      }  
    },  
  },  
};  
</script>

1.4 配置 Axios

在Vue的request.js模块中使用 axios 封装 HTTP 请求

import { ElMessage } from 'element-plus'
import router from '../router'
import axios from "axios";

const request = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,
    timeout: 30000  // 后台接口超时时间设置
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    let student = JSON.parse(localStorage.getItem("student-user") || '{}')
    config.headers['token'] = student.token
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        // 当权限验证不通过的时候给出提示
        if (res.code === '401') {
            ElMessage.error(res.msg);
            router.push("/login")
        }
        return res;
    },
        error => {
        console.log('err' + error)
        return Promise.reject(error)
    }
)


export default request

二、遇到的问题及解决办法

2.1 Vue Axios 引用报错

问题描述

|               Module parse failed: Unexpected token (5:2)
                You may need an appropriate loader to handle this file type.
                | 
                |export default {
                |   ...utils,
                |...platform
                | } 

因为安装axios的时候，是直接默认装的最新版，没有去指定版本，所以换个低版本的问题就解决咯。
解决方法

2.2 Axios请求前端跨域问题

问题描述

Access to XMLHttpRequest at 'http://localhost:9090/login' from origin 'http://localhost:9090' has been 
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

axios请求出现前端跨域问题，通过前端进行反向代理来解决跨域问题。
proxy 代理路径：

proxy: {  
  '/api': {  
    target: 'http://localhost:9090',  
    ws: false,  
    changeOrigin: true  
  }  
}

解决方法

三、总结

3.1 Axios流程图

以下我将用语言来描述其基本使用流程：

• 开始请求
  应用程序中的某个部分（如用户交互、定时器、其他API调用等）触发一个HTTP请求的需求。

• 创建axios实例
  如果需要，可以创建一个axios的实例，并配置一些默认选项（如baseURL、headers等）。
  这一步是可选的，因为你可以直接使用axios的全局函数（如axios.get(), axios.post()等）。

• 构建请求配置
  准备请求的配置对象.。

• 发送请求
  使用axios的实例方法（如果创建了实例）或axios的全局函数来发送请求。
  例如：axios.get(url, config) 或 axiosInstance.post(url, data, config)。

• 请求拦截
  如果设置了请求拦截器（通过axios.interceptors.request.use()），则在请求发送前会先执行拦截器中的函数。
  拦截器可以用于在请求发送前修改请求配置，或根据条件取消请求。

• 发送请求到服务器
  axios将请求发送到指定的URL。

• 服务器响应
  服务器处理请求并返回响应。

• 响应拦截
  如果设置了响应拦截器（通过axios.interceptors.response.use()），则在响应返回给应用程序前会先执行拦截器中的函数。
  拦截器可以用于在响应返回后修改响应数据，或根据条件处理错误。

• 处理响应
  axios将服务器的响应返回给应用程序。
  应用程序可以通过.then()或async/await来处理响应数据。
  如果请求失败（如网络错误、服务器错误等），则可以通过.catch()来处理错误。

• 结束请求
  请求处理完成，应用程序可以继续执行其他操作或等待下一个请求。

3.2 总结

axios概述已在第一部分叙述完毕，总的来说，axios是一个功能强大、易于使用的HTTP客户端库，适用于各种Web应用程序的HTTP请求需求。