vue3+cli4.5知识点6axios通信:get请求|post请求(已封装)

vue2+vuecli3.0+axios用法点击这里

配置按这个配置，代码可以复制上面链接里的。

一、安装和配置axios

1.安装命令

npm install -save axios
或
npm install axios

2.导入

在vuecli3中可以在main.js中使用Vue挂载全局。在vuecli4.5中没有全局的Vue对象，我们怎么办呢？

// 全局引入axios，并进行全局注册
import axios from 'axios'
Vue.prototype.$axios = axios

3.vue4.5中引入axios有两种使用方法：

第一种方法：在main.js里引入并关联全局。

app.config.globalProperties可以代替原来版本的Vue实例对象。

// 引入axios
import axios from 'axios'
const app=createApp(App)
//axios 关联到vue实例对象的全局属性中
app.config.globalProperties.$axios=axios
//或者
//app.config.globalProperties.$http=axios

app.use(store)
app.use(router)
app.mount('#app')

关联全局后在组件中不用重新引入import axios from 'axios’了。

第二种方法：
vue4.5中可以直接不用管main.js，在使用axios的组件直接引入axios即可。

//xxx.vue
import axios from 'axios'

4.在组件中使用axios

vuecli4.5中axios的使用也不再是this.$axios.get()等，而是直接写axios.get()。这个测试成功了。
但是在使用过程中，有时axios.get()会提示一个proxy错误，必须还得this.$axios.get()才不报错，不太懂这里。

二、get请求

我代码写的很清楚了，都是运行好的，可以单独复制，就不再另写了，直接放代码。

版本：vuecli4.5

vue路径：d://allvue/vue3demo3/src/conmenents/axios/gettest.vue

python路径：d://ajax/worktwo/worktwo/vue3demo3/ views 和worktwo/urls.

gettest.vue

运行不了就把axios.get()换成this.$axios.get()

<template>
	<div>
		<h3>下面是axios的使用方法：Get方式    </h3>
		<h5> python:打开，d/ajax/worktwo里。  vuedemo3 </h5>
		
		<h3>get不传参，只接收</h3>
		<div class="a">
			<button @click="func()" type="button" class="btn btn-primary">get不传参测试按钮</button>
			<p>{
  {msg0}}</p>
		</div>
		
		<div class="a">
			<h4>方式一：路径？传参</h4>
			<button @click="datafun1()" type="button" class="btn btn-primary">get（路径？id=1）测试按钮</button>
			<p>{
  {msg1}}</p>
		</div>
		
		<div class="a">
			<h4>方式二：params传参</h4>
			<button @click="datafun2()"  type="button" class="btn btn-primary">get params传参测试</button>
			<p>{
  {msg2}}</p>
		</div>
		
		<div class="a">
			<h4>方式三：params传参，写的规范，一般用这个</h4>
			<button @click="datafun3(1)"  type="button" class="btn btn-primary">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 class="a">
			<h4>方式四1：get并发请求spread</h4>
			<button @click="datafun4all()"  type="button" class="btn btn-success">get并发请求spread</button>
			<p>{
  {msg4_1}}</p>
			<p>{
  {msg4_2}}</p