Axios网络请求总结

在实际项目开发中,前端页面所需要的数据往往需要从服务器端获取,这必然涉及与服务器的通信。Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。Axios 在浏览器端使用XMLHttpRequests发送网络请求,并能自动完成JSON数据的转换。

官网地址:https://www.axios-http.cn/

1.版本说明

axios主要有两个版本系列,分别是0.x版本和0.21.x版本。

0.x版本:这是较旧的版本,支持浏览器和Node.js环境。在这个版本中,Axios使用基于XHR(XMLHttpRequest)的传统AJAX请求,并且使用回调函数来处理响应结果

0.21.x版本:这是更新的版本,同样支持浏览器和Node.js环境。在这个版本中,Axios使用基于浏览器的Fetch API和Node.js的http模块进行请求。它使用Promise和async/await语法来处理响应结果,使得代码更加简洁和易读。这个版本要求Node.js版本不低于10.0.0,并且需要使用支持Promise和Fetch API的浏览器。

Axios的不同版本之间有一些功能和API的变化。例如0.5.1和0.5.4版本将具有相同的API,但0.6.0版本将会有重大变化。

2.vue引入axios

首先先按照axios到node_modules中

bash 复制代码
npm install axios@0.21.1

其次在main.js中引入

javascript 复制代码
import axios from 'axios'

//配置请求根路径
axios.defaults.baseURL="http://127.0.0.1:8789";

//将axios作为全局的自定义属性,每个组件可以在内部直接访问
Vue.prototype.$http = axios;

最后就可以在vue组件中发起使用

javascript 复制代码
<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-view/> -->
    <First/>
    <Movie title="金刚狼" rating="8.8"></Movie>
    <Movie v-for="movie in movies" :title="movie.title" :rating="movie.rating" :key="movie.id" ></Movie>
    <Table :tableData="tbdata"></Table>
  </div>
</template>

<script>
import First from '@/components/First.vue'
import Movie from '@/components/Movie.vue'
import Table from '@/components/Table.vue'
export default {
  name: 'App',
  data:function(){
    return {
      movies:[
        {id:1,title:"金刚狼",rating:"8.8"},
        {id:2,title:"金刚狼2",rating:"8.9"},
        {id:3,title:"金刚狼3",rating:"9.0"},
      ],
      tbdata:[]
    }
  },
  created(){
    console.log('App.vue is created');
    this.$http.get("/tblEmployee/getAll").then((response)=>{
      console.log(response.data);
      this.tbdata=response.data;
    }).catch(function(err){
      console.log(err);
    }).then(
      function(){
        console.log("无论如何都要执行一下")
      }
    )
  },
  components:{
    First,
    Movie,
    Table
  }
}
</script>

3.axios一些常用的API总结

相关推荐
白帽黑客沐瑶3 天前
【网络安全就业】信息安全专业的就业前景(非常详细)零基础入门到精通,收藏这篇就够了
网络·安全·web安全·计算机·程序员·编程·网络安全就业
树码小子3 天前
Java网络编程:(socket API编程:TCP协议的 socket API -- 回显程序的服务器端程序的编写)
java·网络·tcp/ip
绿箭柠檬茶3 天前
Ubuntu 服务器配置转发网络访问
服务器·网络·ubuntu
real 13 天前
传输层协议UDP
网络·网络协议·udp
路由侠内网穿透3 天前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
喵手3 天前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
徐子元竟然被占了!!3 天前
实验-基本ACL
网络
ftpeak3 天前
从零开始使用 axum-server 构建 HTTP/HTTPS 服务
网络·http·https·rust·web·web app
LabVIEW开发3 天前
LabVIEW气体污染无线监测
网络·labview·labview知识·labview功能·labview程序
error:(3 天前
【从零到公网】本地电脑部署服务并实现公网访问(IPv4/IPv6/DDNS 全攻略)
网络·智能路由器