vue引入axios发起get和post请求

其实，我觉得常用的请求就三种方式

1. get请求，contentType是application/x-www-form-urlencoded,请求参数可以在请求路径上看到，java后端逐个参数逐个参数去接受
2. post请求，contentType是application/x-www-form-urlencoded，请求参数可以在请求路径上看到，java后端逐个参数逐个参数去接受，跟上面类似
3. post请求，conentType是application/json,请求参数在请求路径上看不到，只能在Request Payload看到请求参数，java后端只能用对象去接受，这种是适合有很多个参数的情况，用对象也方便扩展参数

演示一下前端的demo

• 引入axios依赖

  npm install axios --save

• 新建untils文件夹，新建request.js文件，引入axios

  import axios from 'axios'
  const service = axios.create({
      baseURL: 'http://localhost:8080', // 基础路径,将统一的部分全部封装
      withCredentials: true, // 表示请求可以携带cookie
  })
  
  service.interceptors.request.use(
      function (config) {
          // 在发送请求之前做些什么
          return config
      },
      function (error) {
          // 对请求错误做些什么
          console.log('出错了',error)
          return Promise.reject(error)
      }
  )
   
  // 添加响应拦截器
  service.interceptors.response.use(
      function (response) {
          console.log('响应了',response)
          
          // 这个地方响应了数据该做点什么 做想做的事情
          // dataAxios 是 axios 返回数据中的 data
          const dataAxios = response.data
          // 这个状态码是和后端约定的
          // const code = dataAxios.reset
          return dataAxios
      },
      function (error) {
          
          // 对响应错误做点什么
          console.log('出错了',error)
          ElMessage({
              message: '接口报错了',
              type: 'success',
            })
          return Promise.reject(error)
      }
  )
  
  //前端采用export.default，在写后端代码时用module.export
  export default service
  

• 新建apis文件夹，建立userApi.js,这里是记录用户模块的api,引入一下刚才定义的request.js

  这里的三种方式就对应了我最开始定义的情况，需要注意的是，第三种post请求application/json他的属性名称是data，和以上两种params不一样，

  import httpRequest  from '../utils/request'
  
  export function userLogout(param) {
      return httpRequest({
          url: '/test/test1',  //自己请求的接口
          method: 'get',  //请求方式
          params: param,    //参数
      })
  }
  
  export function userRegister(param) {
      return httpRequest({
          url: '/test/test2',  //自己请求的接口
          method: 'post',  //请求方式
          params: param,    //参数
      })
  }
  
  export function userLogin(param) {
      return httpRequest({
          url: '/test/test3',  //自己请求的接口
          method: 'post',  //请求方式
          data: param,    //参数
      })
  }
  

• 请求调用，可以看到我们在调用这三种的方式的时候，请求参数都封装成对象形式，就算只有一个参数，也是封装成js对象，这就很统一、方便。

  <script>
  import { userLogin,userLogout,userRegister,user } from '@/apis/userApi' //这里引入的就是刚刚添加的接口
  
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    mounted () {
      console.log(111)
      const param = {param1:'10',param2:'11'}  //自己组装参数
       userLogin(param).then((res) => {
          console.log(222)
           console.log(res)
       })
      // const param = {param1:'10',param2:'11'}  //自己组装参数
       userLogout(param).then((res) => {
          console.log(333)
          console.log(res)
       })
  
      // const param = {param1:'10',param2:'11'}  //自己组装参数
       userRegister(param).then((res) => {
          console.log(444)
          console.log(res)
       })
  
    }
  }
  </script>
  
  

  

• 最后也来展示一下java的代码

  import org.springframework.web.bind.annotation.*;
  
  import java.util.Map;
  
  @RestController
  @RequestMapping(value = "/test")
  public class TestController {
  
      @GetMapping(value = "/test1")
      public  String test1(@RequestParam(value = "param1") String param1,@RequestParam(value = "param2") String param2) throws Exception{
          return "aaa";
      }
  
      @PostMapping(value = "/test2")
      public  String test2(@RequestParam(value = "param1") String param1,@RequestParam(value = "param2") String param2) throws Exception{
          return "bbbb";
      }
  
      @PostMapping(value = "/test3")
      public  String test3(@RequestBody Map map) throws Exception{
          return "ccc";
      }
  
  
  }