本文介绍了axios，一个流行的JavaScript网络请求库，包括其安装、在Vue项目中的集成以及与原生Ajax的对比。通过示例展示了如何使用axios进行GET和POST请求，并提供了在Vue组件中使用的代码片段。
一、什么是axios：
axios是一种网络请求库，用于发送和接收请求。它可以通过promise机制来处理请求，使用jsonp的方式获取数据，也可以使用默认的get请求的参数拼接。axios还可以发送并发请求，使用全局请求配置格式和timeout来控制请求的执行。在封装网络请求时，可以使用promise包装、回调函数的方法或拦截器来处理请求。
二、axios的安装使用：
1、npm安装
npm install axios
2、在vue项目的main.js文件中引入axios
1、import axios from 'axios'
2、Vue.prototype.$axios = axios
3、在组件中使用axios
<script>
export default {
mounted(){
this.$axios.get('/goods.json').then(res=>{
console.log(res.data);
})
}
}
</script>
三、Axios技术是原生的Ajax进行封装，简化书写
我们在之前的Ajax专题中有完整的介绍过Ajax和Axios技术
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible"content="ie=edge" />
<title>axios基本使用</title>
</head>
<body>
<1--两个按钮分别用来实现两种数据获取-->
<input type="button" value="get请求"class="get"><input type="button" value="post请求"class="post">
<!-- 官网提供的 axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list请求方法:get
请求参数:num(笑话条数,数字)响应内容:随机笑话
//事件绑定
document.querySelector(".get").onclick = function () {
// axios的get格式:get后跟url，response为返回休，err为错误 axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {
console.log(response);},function(err){
console.log(err);})
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg请求方法:post
请求参数:username(用户名,字符串)响应内容:注册成功或失败
*
/事件绑定
document.querySelector(".post").onclick =function(){
// axios的post格式:post后跟ur1和请求体，response为返回体，err为错误
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"}).then(function(response ){
console.log(response); console.log(this.skill);},function (err) {
console.log(err);})
</script>
</body>
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
