尚医通学习笔记 Day5---Axios使用

最新推荐文章于 2022-07-13 21:02:09 发布

GTW_Zeus

最新推荐文章于 2022-07-13 21:02:09 发布

阅读量241

点赞数 1

文章标签： vue axios

本文链接：https://blog.csdn.net/GTWZeus/article/details/116231815

版权

【Zeus】项目类专栏收录该内容

30 篇文章 5 订阅

订阅专栏

Axios介绍

独立与Vue的一个项目，可以用于浏览器和node.js中发送ajax请求。本质上也是对原生XHR的封装，只不过是Promise，符合最新的ES规范，具有以下特征：

从浏览器中创建 XMLHttpRequest
支持 Promise API
客户端支持防止CSRF（就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。）
提供了一些并发请求的接口（重要，方便了很多的操作）
从 node.js 创建 http 请求
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据

与Ajax联系

ajax实现了网页的局部数据的刷新，axios实现了对ajax的封装

案例演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
<script src="//vue.js文件地址"></script>
<script src="//axios.min.js文件地址"></script>
</head>
<body>
<div id="app">
  
  <div v-for="site in info">
    {{ site.name }}
  </div>
</div>

<script>
const app = {
  data() {
    return {
      info: 'Axios 测试!!'
    }
  },
  //页面渲染后执行
  mounted () {
    axios
      .get('json文件地址路径')
      //请求成功，则通过箭头函数 this.info = response.data.sites拿到json数据的每一项
      .then(response => (this.info = response.data.sites))
      .catch(function (error) { 
      // 请求失败处理
        console.log(error);
      });
  }
}


</script>
</body>
</html>

GTW_Zeus

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
尚医通学习笔记 Day5---Axios使用

Axios介绍独立与Vue的一个项目，可以用于浏览器和node.js中发送ajax请求。本质上也是对原生XHR的封装，只不过是Promise，符合最新的ES规范，具有以下特征：从浏览器中创建 XMLHttpRequest支持 Promise API客户端支持防止CSRF（就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。）提供了一些并发
复制链接

扫一扫