从零开始教会你Axios
前言
本篇是讲解 Axios 库文件的详细笔记包括应用实列和注意事项以及 Axios的优点
个人主页：尘觉主页
个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力
在csdn获奖荣誉: csdn城市之星2名
Java全栈群星计划top前5
端午大礼包获得者
欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看
如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦
文章目录
- Axios
-
- 基本说明
- 学习文档
- Axios 库文件
- Axios 应用实例
-
- 注意
- 数据json
- 注意事项和细节说明
- 总结
Axios
基本说明
- axios 是独立于 vue 的一个项目，不是 Vue 的一部分
- axios 通常和 Vue 一起使用，实现 Ajax 操作
- Axios 是一个基于 promise 的 HTTP 库
学习文档
https://javasoho.com/axios/
Axios 库文件
1、使用 axios 需要引入 axios 库文件
2、可以直接引入
< script scr=“https://unpkg.com/axios/dist/axios.min.js”>
3、也可以下载 axios.min.js
< script src=“vue.js”>
< script src=“axios.min.js”>
Axios 应用实例
● 需求: 在 Vue 项目中使用 Axios, 从服务器获取 json 数据, 显示在页面
- axios.get() 表示发出ajax请求
- http://localhost:63342/axios/data/response.data.json 表示请求的url要根据实际情况来填写
- axios发出ajax请求的基本语法
axios.get(url).then(箭头函数).then(箭头函数)…catch(箭头函数)
(1) 如果get请求成功就进入到第一个then()
(2) 可以再 第一个then()中继续发出axios的ajax请求
(3) 如果有异常, 会进入到 catch(箭头函数)
- list在生命周期函数created() 中调用-自己去回顾vue的生命周期函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios的应用实例title>
head>
<body>
<div id="app">
<h1>{{msg}}h1>
<table border="1" width="200">
<tr>
<td>名字td>
<td>年龄td>
tr>
<tr v-for="monster in monsterList">
<td>{{monster.name}}td>
<td>{{monster.age}}td>
tr>
table>
div>
<script src="vue.js">script>
<script src="axios.min.js">script>
<script>
new Vue({
el: "#app",
data: {
msg: "妖怪信息列表",
monsterList: [] //表示妖怪的信息数组
},
methods: {//自定义方法
list() {//发送ajax请求,获取数据 axios
/*
解读
1. axios.get() 表示发出ajax请求
2. http://localhost:63342/axios/data/response.data.json 表示请求的url
要根据实际情况来填写
3. axios发出ajax请求的基本语法
axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)
(1) 如果get请求成功就进入到第一个then()
(2) 可以再 第一个then()中继续发出axios的ajax请求
(3) 如果有异常, 会进入到 catch(箭头函数)
4. list在生命周期函数created() 中调用-自己去回顾vue的生命周期函数
*/
axios.get("http://localhost:63342/axios/data/response.data.json")
.then(responseData => {
console.log("responseData= ", responseData)
//使用JSON.stringify(json) 把json对象转成一个字符串,方便观察
console.log("responseData= ", JSON.stringify(responseData));
// console.log("responseData.data= ", responseData.data)
// console.log("responseData.data.data= ", responseData.data.data)
console.log("responseData.data.data.item= ", responseData.data.data.items)
//将妖怪列表数组信息, 绑定到 data数据池的 monsterList
this.monsterList = responseData.data.data.items;
//可以再次发出ajax请求, 故意发出了第二次ajax请求， 回顾老师讲过的promise发出多次请求
// return axios.get("http://localhost:63342/axios/data/response.data.json")
})
// .then(responseData => {
// console.log("第二次axios发出 ajax请求responseData= ", responseData)
// })
.catch(err => {
console.log("异常=", err)
})
}
},
created() {
this.list();
}
})
script>
body>
html>
注意
responseData.data.data.items 之所以要二个data的原因是 第一个 .data的返回第一次请求的url的对象 第二个 .data才是返回需要的对象然后 .items读取
数据json
{
"success": true,
"message": "成功",
"data": {
"items": [
{
"name": "牛魔王",
"age": 800
},
{
"name": "红孩儿",
"age": 500
},
{
"name": "蜈蚣精",
"age": 200
}
]
}
}
注意事项和细节说明
1 将 JSON 对象转成 JSON.stringify(response)
2 格式化输出 JSON 字符串，方便观察分析到 https://www.json.cn看看
总结
我们使用Axios要注意是vue的一个独立的一个项目极大的减轻的程序员的工作负担是更加注重业务开发
从上面得出Axios的优点有
- 简单易用，api接近于jquery，比原生的fetch之类的简单
- 浏览器兼容性好，都能兼容IE7，使用fetch就得自己处理兼容
- 通用性好，能在node和浏览器中使用，api一致
- 稳定大牌，vue官网文档有推荐
热门专栏推荐
想学习vue的可以看看这个
java基础合集
数据库合集
redis合集
nginx合集
linux合集
等等等还有许多优秀的合集在主页等着大家的光顾感谢大家的支持
欢迎大家加入我的社区 尘觉社区
文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力