【Axios与Vue.axios请求模块】

一、Axios

1、Axios模块

axios模块：是一个基于promise的http客户端请求工具

(1)从浏览器中创建XMLHttpRequest：异步请求对象

(2)支持PromiseAPI：请求的返回值是Promise对象(resolve、reject)

(3)从Node.js创建http请求

(4)拦截请求和响应

2、axios的使用方法

(1)安装axios

npm install axios (在vite客户端）

npm install cors（在express服务器端进行此模块的安装，因为浏览器会将js代码跨域模块的访问进行拦截，出于安全考虑，所以为了进行跨域访问，需要安装这个cors模块）

(2)无参的get请求方式

 axios.get(‘/url’).then((result)=>{

                 }).catch((err)=>{

                   })

客户端：
Test.vue代码段：

<template>
  <button @click="myClick">Get请求</button>
  <br/><br/>
  <p>{{ responseText }}</p>
</template>

<script>
import axios from 'axios';
export default {
  name: "Test",
  data(){
    return{
      responseText:''
    }
  },
  methods:{
    myClick(){
      axios.get('http://localhost:3000/users/test').then((result)=>{
        this.responseText =result.data.msg
        console.log(result.data.msg)
      }).catch((err)=>{
        console.log(err)
      })

    }
  }
}
</script>

<style scoped>

</style>

App.vue代码段：

import Test from './components/Test.vue'
<template>
  <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
  <br/>
  <Test/>
</template>

服务器端：
user.js代码段：

// 测试路由：http://localhost:3000/users/test
router.get('/test',(req, res) => {
  res.json({
    code:1001,
    msg:测试信息
  })
})

(3)带参的get请求：

== 服务器端：‘req.query.参数名’ (格式接收)==

 axios.get('/url'，{params: {id: 12}}).then((result)=>{
               
               }).catch((err)=>{

            })

或者：

 axios({
				url:'url',
				
				methods: 'get',
				
				params: {
				  参数名: 参数值
				}
			  }).then((result)=>{
				 
				 请求成功的处理代码
				 
			  }).catch((err)=>{
				
				 失败的处理代码
			  })

客户端：
Test.vue代码段：（两种方式写法如下）

 myClick(){
      axios.get('http://localhost:3000/users/test',{params:{userName:'张三'}}).then((result)=>{
        this.responseText =result.data.msg
        console.log(result.data.msg)
      }).catch((err)=>{
        console.log(err)
      })
      // axios({
      //   url:'http://localhost:3000/users/test',
      //   methods:'get',
      //   // params:{
      //   //   userName:'刘备'
      //   // }
      // }).then((result)=>{
       //   this.responseText =result.data.msg
        //  console.log(result.data.msg)
      //  }).catch((err)=>{
        //  console.log(err)
      })
    }

服务器端：
user.js代码段：

// 测试路由：http://localhost:3000/users/test
router.get('/test',(req, res) => {
  let name = req.query.userName
  res.json({
    code:1001,
    msg:name
  })
})

(4)post请求：

服务器端：‘req.body.参数名’ 获取数据

    axios.post('url',{参数名:参数值}).then((result)=>{
			  
			  }).catch((err)=>{
			  
			  })
			  

或者：

   axios({
			   url：'url'，
			    methods: 'post'，
			    data: {
				  参数名:参数值
				  }
			  }).then((result)=>{
			  }).catch((err)=>{
			  })

服务器端：
user.js代码段：

//测试路由：http://localhost:3000/users/post
router.post('/post',(req, res) => {
  let id=req.body.postId;
  res.json({
    code:1001,
    info:id
  })
})

客户端：
Test.vue代码段：（两种方式写法如下）

<template>
  <button @click="myClick">Get请求</button>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button @click="postClick">Post请求</button>
  <br/><br/>
  <p>{{ responseText }}</p>
  <p>{{ postText }}</p>
</template>

<script>
import axios from 'axios';
export default {
  name: "Test",
  data(){
    return{
      responseText:'',
      postText:''
    }
  },
  methods:{
  
      postClick(){
      // axios({
      //   url:'http://localhost:3000/users/post',
      //   methods:'post',
      //   data:{
      //     postId:'S_POST'
      //   }
      // }).then((result)=>{
      //   this.postText=result.data.info;
      // }).catch((err)=>{
      //   console.log(err)
      // })
      axios.post('http://localhost:3000/users/post',{postId:'S_POST'}).then((result)=>{
        this.postText=result.data.info;
      }).then((result)=>{
        this.postText=result.data.info;
      }).catch((err)=>{
        console.log(err)
      })
    }
}
</script>

<style scoped>

</style>

(5)put请求

put请求：用于对数据更新时使用。请求时传参的方式、服务器端获取数据的方式与post请求类似

(6)delete请求

delete请求：用于删除数据。可以采用类似get方式或类似post方式的写法

a、类似于get方式：服务器端以’req.query.参数名’的格式获取请求数据

   axios.deleter('url'，
				
	  {params:{参数名:参数值}}
					 
		).then((res)=>{
					
		}).catch((err)=>{})

b、类似于post方式：

    axios.deleter('url'，
				
		  {data:{参数名:参数值}}
					 
			).then((res)=>{
					
		}).catch((err)=>{})

(7)axios的数据封装格式：

a、data：服务器端响应的数据
b、status：请求的状态码
c、statusText：状态码所对应的状态信息
d、headers：服务器端响应头信息
e、config：请求的配置信息

二、vue-axios模块

vue-axios模块：是针对Vue对axios进行了一层简单的包装

(1)安装

npm install vue-axios

(2)在main.js文件中进行全局的配置

        a、导入axios和vue-axios
		
		b、注册：
		
		      //定义挂载组件
              const app=createApp(App)

              //在根组件中注册axios
              app.use(VueAxios,axios)
			  
              //根组件挂载
              app.mount('#app')

main.js文件:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import axios from "axios";
import VueAxios from 'vue-axios'

//定义挂载组件
const app=createApp(App)

//在根组件中注册axios
app.use(VueAxios,axios)
//根组件挂载
app.mount('#app')