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

vue利用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">

效果图:

vue利用axios来完成数据的交互

参考网址:https://github.com/axios/axios

总结

以上所述是小编给大家介绍的vue利用axios来完成数据的交互,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
vue,axios数据交互,vueaxios,实例

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“vue利用axios来完成数据的交互”

暂无“vue利用axios来完成数据的交互”评论...