前端Axios搭配Vue(认清Axios,Axios结合Vue发出Ajax请求,返回JSON数据案例!简洁易懂。)

一. 什么是Axios

1. axios 是独立于 vue 的一个项目,不是 Vue 的一部分
2. axios 通常和 Vue 一起使用,实现 Ajax 操作
3. Axios 是一个基于 promise HTTP

axios官方文档

二.引入Axios库文件

1.可以直接引用

2.可以下载Axios的js文件导入

下载此js文件

三.使用Axios配合Vue发出Ajax请求案例

在Vue中使用Axios,向服务器发送Ajax请求,将获取的json数据显示界面

java 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
</head>
<body>
<div id="app">
    <h1>妖怪列表</h1>
    <table border="1" width="300">
        <tr>
            <td>名字</td>
            <td>年龄</td>
        </tr>
        <tr v-for="monster in monsterList">
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
            </td>
        </tr>
    </table>
</div>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
// data / created() / methods 是一个固定结构
        data: {
            monsterList: []//数组
        },created() { //在页面渲染前执行,调用 list()
            this.list()
        },methods: {

            list() {
                axios.get('http://localhost:63342/axios/data/response.json')
                    .then(response => {
                        console.log("response=",response);
                        console.log("response.data=",response.data);
                        console.log("response.data.data=",response.data.data);
                        console.log("response字符串=",JSON.stringify(response.data));

                        this.monsterList = response.data.data.items;
                    })
                    .catch(error => {
                        console.log(error)
                    })

            }
        }
    })
</script>
</body>
</html>

注意点

* 1. 使用 axios 发送 ajax 请求
* 2. 语 法 格 式 axios. 请 求 方 式 ( 请 求 路 径 ).then( 箭 头 函
数).catch(箭头函数)
* 3. 请求成功,执行 then 的函数, response 就是返回的数据, 名
字由程序员确定
* 4. 请求失败, 执行 catch 的函数
* 5. this.monsterList = response.data.data.items 把 返 回 的
data.items 赋给 monsterList
* 6. 这里的 http://127.0.0.1:63342/axios/response.json
径需要根据实际的端口和资源名来修改

结果:

注意点:

在此网站可以将json对象转换为字符串https://www.json.cn/

相关推荐
乐闻x2 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚4 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷15 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd79419 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You28 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生39 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410942 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress