前端知识之Axios

妖狐艹你老母 2023-01-10 14:57 150阅读 0赞

# Axios的使用 #

### 文章目录 ###

*  Axios的使用
 *   *  1. Axios介绍
     *  2. 代码实现

## 1. Axios介绍 ##

Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中；经常和Vue结合使用，以 实现AJAX操作

## 2. 代码实现 ##

(1) 创建data.json文件

{
        "success":true,
        "code":20000,
        "message":"成功",
        "data":{
            "items":[
                {"name":"lucy","age":20},
                {"name":"mary","age":30},
                {"name":"jack","age":40}
            ]
        }
    }

(2) 导入axios.min.js文件

(3) 创建HTML页面

<body>
        <div id="app">
            <div v-for="user in userList">
                {
       {user.name}} -- {
       {user.age}}
            </div>
        </div>
        <script src="vue.min.js"></script>
        <script src="axios.min.js"></script>
        <script> new Vue({ el: '#app', data: { userList:[] //接收JSON对象中的数组 }, created() { //调用定义的方法 this.getUserList() }, methods:{ //创建方法，查询JSON中的所有数据 getUserList() { //使用Axios发送ajax请求 //axios.提交方式("请求路径").then(箭头函数).catch(箭头函数) axios.get("data.json") .then(response =>{ //请求成功执行then方法 //response接收请求之后返回的数据，可以自定义名称 //返回的JSON对象在data中，访问data才可得到JSON对象 this.userList = response.data.data.items }) .catch(error =>{ //请求失败执行catch方法，error为失败的信息 }) } } }) </script>
    </body>

![在这里插入图片描述][20210125125927533.png]

[20210125125927533.png]: https://img-blog.csdnimg.cn/20210125125927533.png

发表评论取消回复

表情：

评论列表（有 0 条评论，150人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javaweb知识之AJAX(包含axios)

目录一、概念 1.概念： 2.AJAX的作用：二、使用步骤三、升级封装版（Axios） 1.概念 2.使用步骤一、概念 1.概念： AJ

深碍√TFBOYSˉ_/ 2023年09月23日 20:08/ 0 赞/ 34 阅读

相关前端知识大全之HTML

目录前言必读一、概念讲解 1.前端包含什么？ 2.编写的代码加载出来的原理？ 3.编写代码的工具？ 4.HTML标签两大类型？ 5.HTML标签关系？

太过爱你忘了你带给我的痛/ 2023年09月23日 16:37/ 0 赞/ 111 阅读

相关前端知识学习之路

前端方面的知识从重要程度来排，私以为应该先后学这些： 1，api学习，系统地学，可以看看这个方面的书，不要只零散地看网上文章，这个书钱要舍得花。前端领域，这个方面我推荐看看

灰太狼/ 2023年02月14日 03:07/ 0 赞/ 15 阅读

相关前端知识之Axios

Axios的使用文章目录 Axios的使用 1. Axios介绍 2. 代码实现 1. Axios介绍 Axios是一个基

妖狐艹你老母/ 2023年01月10日 14:57/ 0 赞/ 151 阅读

相关前端知识普及之HTML

什么是Doctype?能吃吗？我想使用过sublime的同学，应该会有一个snippets。 !+[TAB] 结果就是: <!DOCTYPE ht

拼搏现实的明天。/ 2022年09月23日 15:55/ 0 赞/ 209 阅读

相关前端劝退之前端知识体系（前端面试体系）

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![19e7a2d57548f81f0945c03d92ba2e9f.png][] 前

柔情只为你懂/ 2022年09月11日 03:25/ 0 赞/ 277 阅读

相关前端知识学习之路

前端方面的知识从重要程度来排，私以为应该先后学这些： > 来源自:[Web前端知识在乱花渐欲迷人眼的当下，如何分清主次和学习优先级呢？][Web] 1，API学习，系统

女爷i/ 2022年07月26日 06:14/ 0 赞/ 217 阅读

相关前端之Vue使用axios跨域正确配置

组件代码 <script> export default { name: 'App', methods: { getData() { this.$http.get

小咪咪/ 2022年05月23日 09:18/ 0 赞/ 273 阅读

相关前端入门之(axios解析)

前言：vue已经放弃维护vue-resource了，然后推荐使用axios，这一推荐不得了了，axios的人气大增啊，在github已经是50多k的star了，axios算是成

比眉伴天荒/ 2022年04月16日 03:59/ 0 赞/ 349 阅读

相关前端框架 ajax : axios API

axios axios受到[Angular][]提供的[$ http服务的][http]启发。最终，axios努力提供一种类似于独立的服务，以便在Angular之外使用。

心已赠人/ 2022年03月24日 16:38/ 0 赞/ 242 阅读