ajax和axios请求本地json数据对比

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

test.json
{    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}
        
    ]
}

代码：

效果如下：

图片.png

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

1. 从浏览器制作XMLHttpRequests2. 让HTTP从node.js的请求3. 支持Promise API4. 拦截请求和响应5. 转换请求和响应数据6. 取消请求7. 自动转换为JSON数据8. 客户端支持防止XSRF

安装

1：npm安装

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

一切环境依赖搭建好之后

下面来写个例子：axios请求本地json
1：在static文件夹底下新建json文件，（ 本地JSON文件一定要需放在static文件夹之下。）
访问服务器文件，应该把 json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹

图片.png

2：test.json数据格式如下：

{    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}
        
    ]
}

3：写一个axios

getData() {

                axios.get('../../static/test.json').then(response => {                    
                    console.log(response.data);

                }, response => {                    console.log("error");
                });
            }

4：整体代码如下：

5：前台显示：

图片.png

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

原文作者：祈澈姑娘

作者：祈澈菇凉
链接：https://www.jianshu.com/p/4b9cb79fedd5