😀前言
本篇是讲解 Axios 库文件的详细笔记包括应用实列和注意事项以及 Axios的优点
🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉😉
Axios
基本说明
- axios 是独立于 vue 的一个项目，不是 Vue 的一部分
- axios 通常和 Vue 一起使用，实现 Ajax 操作
- Axios 是一个基于 promise 的 HTTP 库
学习文档
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的优点
文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞
