vue3+vuecli4.5+axios用法点这里
下面是vue2用法。
前言
安装axios 用来在vue中更好的和服务器端进行数据通信 。
网络工具库：在前端用的最多的就是axios。vuex 前端全局共享。
axios实现了不用原生js大量封装ajax.
axios特性：
从浏览器中创建XMLHttpRequest
从node.js发出http请求
支持Promise APl
拦截清求和响应
转换清求和响应数据
取消请求
自动转换JSON数据
客广端支持防止CSRF/XSRF
axios支持多种请求方式：
axios(config)axios.request(config)axios.get(url[,config])axios.post(url[data[,config])axios.put(url[data[,config])
一、安装axios
1.安装命令
npm install -save axios或npm install axios
2.在main.js中导入：
vucli3:
// 全局引入axios，并进行全局注册import axios from axiosVue.prototype.$axios = axios
然后就可以在组件中使用啦。
二、get请求
我代码写的很清楚了，都是运行好的，可以单独复制，就不再另写了，直接放代码。
版本：vue2
vue路径：d://allvue/vue3demo2/src/conmenents/axios/gettest.vue
python路径：d://ajax/worktwo/vue3demo2/ views 和worktwo/urls.
gettest.vue
<template><div><h3>下面是axios的使用方法：Get方式 </h3><h5> python:打开，d/ajax/worktwo/worktwo里。 vuedemo3 </h5><h3>get不传参，只接收</h3><div><button @click="func()" type="button">get不传参测试按钮</button><p>{{msg0}}</p></div><div><h4>方式一：路径？传参</h4><button @click="datafun1()" type="button">get（路径？id=1）测试按钮</button><p>{{msg1}}</p></div><div><h4>方式二：params传参</h4><button @click="datafun2()" type="button">get params传参测试</button><p>{{msg2}}</p></div><div><h4>方式三：params传参，写的规范，一般用这个</h4><button @click="datafun3(1)" type="button">get params传参规范测试</button><ul v-for="item,index in arr3" :key="index"><li><span>id:</span>{{item.id}}</li><li><span>内容:</span>{{item.content}}</li></ul></div><div><h4>方式四1：get并发请求spread</h4><button @click="datafun4all()" type="button">get并发请求spread</button><p>{{msg4_1}}</p><p>{{msg4_2}}</p></div><div></
如果觉得《vue3知识点6Vuecli3 axios通信:get请求|post请求(已封装)》对你有帮助，请点赞、收藏，并留下你的观点哦！
