Vue知识系列-axios

た入场券 2023-10-07 22:50 10阅读 0赞

## 一、axios基础知识 ##

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。

*  在浏览器中可以帮助我们完成ajax请求的发送
 *  在node.js中可以向远程接口发送请求

## 二、axios应用场景 ##

![ffe5f0ece61047799cc6db2faaa25f81.png][]

## 三、axios的使用 ##

**第一步**：创建html文件，在body中引入两个js文件：

<script src="vue.min.js"></script>
     <script src="axios.min.js"></script>

**第二步**：axios调用的固定结构

<script>
       new Vue({
          el:"#app",
                //axios固定结构：data，created，methods
          data:{ //在data中定义变量和初始值     
          },
          created(){//页面渲染之前执行
              //调用自定义的方法
              this.save()
          },
          methods:{   //编写具体的方法
              //自定义方法
             save(){}
          }
       })
    </script>

<script>
       new Vue({
          el:"#app",
          //axios固定结构：data，created，methods
          data:{ //在data中定义变量和初始值
              userList:[]
          },
          created(){//页面渲染之前执行
              //调用自定义的方法
              //this表示当前vue对象，使用data中的变量和methods中的方法都需要加this
              this.getUserList() 
          },
          methods:{   //编写具体的方法
              //自定义方法
              getUserList(){
                  //使用axios发送ajax请求
                  //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                  axios.get("data.json")
                       .then(response =>{ //response变量表示axios请求返回的数据
                           this.userList = response.data.data.items
                       })//请求成功执行then方法
                       .catch(error=>{//error变量表示axios请求返回的错误信息
    
                       })//请求失败执行catch方法
               }
            }
      })
    </script>

使用axios发送ajax请求，请求文件，得到数据，在页面显示

![b8bb8b70be314592a2a3d02b0c1c7c30.png][]

**data.json文件**

{
        "success":true,
        "code":20000,
        "message":"成功",
        "data":{
            "items":[
                {"name":"张三","age":22},
                {"name":"李四","age":33},
                {"name":"王五","age":18}
            ],
            "total":3
        }
    }

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

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue知识系列-Node.js

一、Node.js简介 1. 什么是Node.js 简单说Node.js就是运行在服务端的JavaScript。Node.js是一个事件驱动I/O服务端JavaSc

女爷i/ 2023年10月07日 22:53/ 0 赞/ 16 阅读

相关 Vue知识系列-element-ui

一、element-ui概述 element-ui是饿了么前端出品的基于Vue.js的后台组件库，方便程序员进行页面快速布局和构建。官网：[https://eleme

淡淡的烟草味﹌/ 2023年10月07日 22:51/ 0 赞/ 17 阅读

相关 Vue知识系列-axios

一、axios基础知识 axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。在浏览器中可以帮助我们完成ajax请求

た入场券/ 2023年10月07日 22:50/ 0 赞/ 11 阅读

相关 Vue系列知识-vue基础知识二

1. 条件渲染 11.1 v-if （1）v-if=“表达式” （2）v-else-if=“表达式” （3）v-else=“表

今天药忘吃喽~/ 2023年10月06日 19:52/ 0 赞/ 106 阅读

相关 Vue系列知识-vue基础知识

一.Vue的定义 Vue（vju:）是一套用于构建用户界面的渐进式框架。每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下： var vm = n

绝地灬酷狼/ 2023年10月06日 19:34/ 0 赞/ 119 阅读

相关 VUE必会知识(一)---axios基础

axios axios 安装基础用法踩坑小例子后端后端思路

约定不等于承诺〃/ 2022年12月25日 06:55/ 0 赞/ 252 阅读

相关 vue axios

> vue中官方的请求方法一、基本用法 1. `axios(options)` 或 `axios.request(options)` （1）这两个是一样

水深无声/ 2022年12月22日 00:56/ 0 赞/ 283 阅读

相关 vue踩坑系列之axios

最近的项目是用vue开发的在开发过程中与后端交互使用的是axios 但是post提交后端总是获取不到值用接口测试器测试没问题后来才知道是有格式问题axios默认发送的是R

灰太狼/ 2022年10月01日 07:57/ 0 赞/ 255 阅读

相关 vue axios

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 1. 从浏览器中创建 XMLHttpR

落日映苍穹つ/ 2022年04月25日 08:50/ 0 赞/ 276 阅读

相关【vue系列】vue使用axios配置全局请求参数

> 产生需求：为了安全，请求需要带上用户参数，有时候接口都全都要带，要一个一个写有点麻烦，所以放在请求头是一个好的选择获取到用户信息并存到本地缓存

以你之姓@/ 2021年12月22日 11:53/ 0 赞/ 377 阅读