vue利用axios来完成数据的交互
(编辑:jimmy 日期: 2024/11/8 浏览:3 次 )
axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
现在Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。所以学习了下,总结如下。
一、功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、自动转换 JSON 数据
7、客户端支持保护安全免受 XSRF 攻击
二、axios的安装方法(官方给了3种方法)
1、npm安装
$ npm install axios
2、bower安装
$ bower install axios
3、直接使用cdn
<script src="/UploadFiles/2021-04-02/axios.min.js">三、安装步骤
这里我使用npm的方法步骤:
①首先在npm中输入
npm install axios
②在main.js加上配置
import axios from ‘axios' Vue.prototype.$http = axios四、请求实例
点击获取数据可以取到想要的数据
<template> <div class="tabbar"> <p>首页</p> <button v-on:click = 'goback'>获取数据</button> <div class="new_wrap" v-for="items in item"> <div class="newcard"> <div> <p>{{items.issuer_nickname}}.</p> </div> <div> {{items.title}} </div> <div class="pic"> <img :src="/UploadFiles/2021-04-02/items.cover">效果图:
参考网址:https://github.com/axios/axios
总结
以上所述是小编给大家介绍的vue利用axios来完成数据的交互,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:JS动画定时器知识总结