前端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数据显示界面

    
    
    
    



    
妖怪列表
    

        

            
名字
            
年龄
        
        

            
{{monster.name}}
            
{{monster.age}}
            
        
    

 

注意点

* 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/