vue项目中使用axios的学习笔记

学习笔记：

本周，我学习了如何在vue项目中使用axios来进行HTTP请求和响应。具体学习内容如下：

了解了axios是一个基于promise的HTTP客户端库，可以用于浏览器和Node.js应用，支持拦截器、取消请求、转换数据、错误处理等功能。
了解了vue是一个简单的前端JavaScript框架，可以用于创建响应式的用户界面和单页应用，支持组件化、模板语法、计算属性、指令、过滤器等特性。
学习了如何使用npm安装axios，并在vue项目中引入和使用它。
学习了如何使用axios的不同方法来发送不同类型的HTTP请求，例如get、post、put、delete等，并通过then和catch来处理响应和错误。

首先安装或引入axios模块
然后创建一个axios实例，设置基本的URL和头部
再在vue组件中，使用axios.get (url, config)方法发送get请求，其中url是要访问的API地址，config是可选的参数对象
然后使用.then (response)和.catch (error)处理返回的promise对象，其中response是包含响应数据和状态的对象，error是包含错误信息的对象
最后在vue模板中，使用插值表达式或v-for指令显示响应数据

例如，你可以参考以下代码：

// src/http-common.js
import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json"
  }
});

// src/components/GetRequest.vue
<template>
  <div>
    <h3>Get Request Example</h3>
    <p>Total Vue Packages: {{ totalVuePackages }}</p>
    <p>Error Message: {{ errorMessage }}</p>
  </div>
</template>

<script>
import http from "../http-common";

export default {
  name: "GetRequest",
  data() {
    return {
      totalVuePackages: null,
      errorMessage: null,
    };
  },
  created() {
    // GET request using axios with error handling
    http.get("https://api.npms.io/v2/search?q=vue")
      .then((response) => (this.totalVuePackages = response.data.total))
      .catch((error) => {
        this.errorMessage = error.message;
        console.error("There was an error!", error);
      });
  },
};
</script>

通过本周的学习，我掌握了vue和axios的结合使用，以及HTTP请求和响应的基本原理和技巧，提高了自己的前端开发水平和效率。同时，我也发现了自己在代码规范、异常处理、性能优化等方面还有待提高，需要在今后的学习中继续改进和提升。