axios是什么,怎么使用?_154.axios是什么?怎么使用?描述使用它实现登录功能的流程?-优快云博客

本文链接：https://blog.youkuaiyun.com/a_b_ccv/article/details/103536372

本文详细介绍Axios模块，一种用于从前端向后端发起HTTP请求的流行工具。文章涵盖Axios的安装、基本使用方法，包括GET和POST请求的示例，并解决CORS跨域问题。此外，还介绍了如何通过qs模块处理POST请求的参数序列化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios是什么

axios是请求后台资源的模块
安装

npm install axios -S

如何使用?

在HTML中引入JS文件

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

在全局对象添加axios对象,包含发送请求的api

调用axios,发起异步请求

Get请求

axios.get("url",{params:{//url你要请求的服务器端地址
	//get方式下,随url发送的参数
}).then(res=>{....})

服务器端CORS跨域

res.writeHeader(200,{
	"Access-Control-Allow-Origin":"*"
});
res.write(JSON.stringify(result));
res.end();

Post请求

axios.post("url","变量=值&变量=值").then(res=>{.....})

注意!!

get和post请求不一样,配置属性名不一样
get请求传参,用的是params:{}对象
post请求传参,必须用字符串
解决问题
引入qs模块
qs安装请参考https://www.npmjs.com/package/qs

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

使用qs

axios.post("url",Qs.stringify({参数:值,参数:值}))
.then(res=>{....})

注意

获得响应式主题的数据:数据不是直接返回,而是包裹在一个对象的data属性中返回
无论是get/post请求,获得的响应都是一个全新的对象,传统的数据响应,包含在该对象的res.data属性中
所以,res.data才能获得之前的响应结果

在脚手架使用

npm install axios

在脚手架的main.js中配置

import axios from 'axios'
//配置访问服务器基础路径
axios.defaults.baseURL="服务器地址";
//保存session信息
axios.defaults.withCredentials=true;
//将axios注册到vue中
Vue.prototype.axios=axios;

利用qs发送axios请求

axios.post("url",Qs.stringify({参数:值,参数:值}))
.then(res=>{....})

有问题可以评论,会即使改的,谢谢