Vue+axios

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'
  }
});
相关推荐
程序视点5 分钟前
已成绝版!8月5日即将下线!b站国际版
前端
遂心_7 分钟前
React初学者必备:用“状态管家”Reducer轻松管理复杂状态!
前端·javascript·react.js
老神在在00110 分钟前
SpringMVC2
java·前端·学习·spring·java-ee
老神在在00111 分钟前
SpringMVC3
java·前端·学习·spring·java-ee
用户33790448021714 分钟前
ECMA6 ---- Class篇 (重难点个人向)
javascript
李明卫杭州15 分钟前
前端实现多标签页通讯
前端·javascript
前端领航者15 分钟前
国际化LTR&RTL布局实战
前端·css
贝加尔湖Pan18 分钟前
图片预加载和懒加载
前端
在钱塘江20 分钟前
《你不知道的JavaScript-上卷》第二部分-this和对象原型-笔记-6-行为委托
前端·javascript
Point20 分钟前
[ahooks] useControllableValue源码阅读
前端·javascript