Vue+axios-EW帮帮网

1. axios简介

axios 是一个基于 Promise 的 HTTP 客户端，主要用于浏览器和 Node.js 环境中发送 HTTP 请求。它是目前前端开发中最流行的网络请求库之一，被广泛应用于各种 JavaScript 项目（如 React、Vue、Angular 等框架或原生 JS 项目）。

核心特点

支持浏览器和 Node.js⭐：在浏览器中使用 XMLHttpRequest 发送请求，在 Node.js 中使用 http 模块，实现了跨环境兼容。
基于 Promise⭐：支持 Promise API，可配合 async/await 使用，让异步请求代码更简洁、易读。
拦截请求和响应⭐：可以在请求发送前或响应返回后进行拦截处理（如添加请求头、处理错误、加载状态管理等）。
自动转换 JSON 数据⭐：请求时会自动将数据转为 JSON 格式，响应时会自动解析 JSON 数据，无需手动处理。
取消请求：支持取消正在进行的 HTTP 请求，避免无效请求浪费资源。
超时处理：可以设置请求超时时间，超时后自动中断请求。
客户端防止 XSRF：提供了防御跨站请求伪造（XSRF）的机制。

2. axios请求地址

链接请求方式：功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

本地导入方式：例子：在同目录下的js文件里的本地axios文件

<script src="js/axios.min.js"></script>

3. axios的基本结构

var myurl = "需要请求的页面以及参数"
axios.get(myurl).then(function(res))

myurl指的是向后台请求的页面以及自定义访问的参数

res指后台响应请求后传递回的参数，数据格式一般为json，用Vue中的data来接收

举例：向后台servlet的class.do发送操作请求op=classList

var app=new Vue({
        el: "#app",
        data:{
            classesList:[]
        },
        methods:{
            searchClass:function () {
                var than = this
                var myurl="http://localhost:8080/class.do?op=classesList"
                axios.get(myurl).then(function (res) {
                    than.classesList=res.data
                })
            }
        }
})

如果myurl传递参数多，则使用axios.post(myurl)方法。

进阶：axios的标准格式为

axios.get(myurl,headers{})

其中myurl为传递参数地址，header{}为请求头

如果传递参数过多，则使用post：

axios.post(myurl,body,headers)

axios.post(myurl,{'key':'value','key2':'value',...},headers{'token':'value'})

myurl为传递参数的地址，

body为传递的参数map，

headers为传递的请求头。

附录：

请求头 headers 简介

在 HTTP 协议中，请求头（Request Headers）是客户端（如浏览器）向服务器发送请求时携带的附加信息。它们以键值对的形式存在，用于描述请求的元数据（如浏览器类型、请求的资源类型、缓存策略等），帮助服务器理解如何处理请求。

理解请求头是开发和调试 HTTP 应用的基础，合理设置请求头可优化性能、增强安全性，并确保客户端与服务器正确交互。

1. 通用头（General Headers）

适用于请求和响应，但与具体数据无关：

Cache-Control：控制缓存策略（如no-cache, max-age=3600）。
Connection：控制连接状态（如keep-alive, close）。
Date：请求的日期和时间。
Pragma：兼容性缓存指令（如no-cache）。
Transfer-Encoding：数据传输编码方式（如chunked）。

2. 请求头（Request-Specific Headers）

描述请求的特定信息：

Accept：客户端可接受的响应内容类型（如application/json, text/html）。
Accept-Charset：客户端可接受的字符集（如utf-8, iso-8859-1）。
Accept-Encoding：客户端可接受的内容编码（如gzip, deflate, br）。
Accept-Language：客户端可接受的自然语言（如zh-CN, en-US）。
Authorization：身份验证信息（如Bearer token, Basic base64）。
Cookie：客户端存储的 Cookie 信息。
Host：请求的服务器域名和端口（如www.example.com:443）。
Origin：发起跨域请求的源（如https://example.com）。
Referer：前一个页面的 URL（拼写错误但被广泛接受）。
User-Agent：客户端信息（如浏览器类型、操作系统，如Mozilla/5.0 (Windows NT 10.0)...）。

3. 实体头（Entity Headers）

描述请求体的元数据（若有请求体）：

Content-Length：请求体的长度（字节）。
Content-Type：请求体的媒体类型（如application/json, multipart/form-data）。
Content-Encoding：请求体的编码方式（如gzip）。
Content-Language：请求体的自然语言（如zh-CN）。

Axios（HTTP 客户端）

axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  }
});

Vue+axios