Javaweb基础-axios

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

GET方法

get请求第一种写法

java 复制代码
//后端
@Slf4j
@RestController
@RequestMapping("/demo")
public class DemoController {

    @RequestMapping("/getTest")
    // 被@RequestParam标记的参数必传,并且参数名前后端一致
    public Map<String, Object> getTest(@RequestParam String param) {
        log.info("入参:{}", param);
        HashMap<String, Object> map = new HashMap<>(2);
        map.put("param", param);
        log.info("出参:{}", map);
        return map;
    }
}
//axios
export default {
  name: 'App',
  methods: {
    getTest: function () {
      this.$axios({
        method: "GET",        //方法
        url: "/demo/getTest", //访问路径
        params: {             //参数 把参数拼接到url后面=》/demo/getTest?param=hi
          param: "hi"        // 后端被@RequestParam标记的参数名为param
        }
      }).then(res => {        //返回参数
        console.log(res)
      }).catch(err => {       //异常
        alert(err)
      })
    }
  }
}

get请求第二种写法

java 复制代码
//后端
@Slf4j
@RestController
@RequestMapping("/demo")
public class DemoController {

    @RequestMapping("/getTest")
    // 被@RequestParam标记的参数必传,并且参数名前后端一致
    public Map<String, Object> getTest(@RequestParam String param) {
        log.info("入参:{}", param);
        HashMap<String, Object> map = new HashMap<>(2);
        map.put("param", param);
        log.info("出参:{}", map);
        return map;
    }
}
//axios
export default {
  name: 'App',
  methods: {
    getTest2: function () {
      this.$axios
          .get("/demo/getTest?param=hello")    //方法名("访问路径?参数名=参数值"),
          .then(res => {                       //返回数据
            console.log(res)
          })
          .catch(err => {                      //异常
            alert(err)
          })
    },
  }
}

get请求发送的请求不能使用被@RequestBody标记的对象接收。

POST方法

post请求第一种写法

java 复制代码
    //后端
    @RequestMapping(value = "/postTest", method = RequestMethod.POST)
    //被@RequestParam标记的参数必传,并且参数名前后端一致
    public Map<String, Object> postTest(@RequestParam String param) {
        log.info("入参:{}", param);
        HashMap<String, Object> map = new HashMap<>(2);
        map.put("param", param);
        log.info("出参:{}", map);
        return map;
    }
    //axios
export default {
  name: 'App',
  methods: {
    postTest: function () {
      this.$axios({
        method: "POST",            //方法
        url: "/demo/postTest",     //路径
        params: {                  //params中的参数被拼接到url后面=》/demo/getTest?param=hi
          param: "hi"              //post请求中后端使用@RequestParam接参数,使用params
        }
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}  
// axios等价于
export default {
  name: 'App',
  methods: {
    postTest: function () {
        this.$axios.post("/demo/postTest?param=hi") 
          .then(res => {
            console.log(res)
          }).catch(err => {
        alert(err)
      }) 
    },
  }
} 

get请求发送的请求时能使用被@RequestBody标记的对象接收。

java 复制代码
//后端
    @RequestMapping(value = "/postTest2", method = RequestMethod.POST)
    public Map<String, Object> postTest2(@RequestBody Map param) {
        log.info("入参:{}", param);
        HashMap<String, Object> map = new HashMap<>(2);
        map.put("param", param);
        log.info("出参:{}", map);
        return map;
    }
//axios
export default {
  name: 'App',
  methods: {
    postTest: function () {
      this.$axios({
        method: "POST",            //方法
        url: "/demo/postTest2",     //路径
        data: {                  //data中的参数被放置在请求体当中,使用@RequestBody标记的对象接收
          param: "hi"       
        }
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}  

其他方法

delete(url: string);

javascript 复制代码
export default {
  name: 'App',
  methods: {
  //第一种
    deleteTest: function () {
      this.$axios({
        method: "DELETE",
        url: "/demo/deleteTest",
        params: {
          param: "hi"    //同样使用params
        }
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
    //第二种
    deleteTest1: function () {
      this.$axios.delete("/demo/deleteTest?param=hi").then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}

head(url: string);

javascript 复制代码
export default {
  name: 'App',
  methods: {
    headTest: function () {
      this.$axios({
        method: "HEAD",
        url: "/demo/headTest",
        params: {
          param: "hi"   //同样使用params
        }
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
    headTest1: function () {
      this.$axios.head("/demo/headTest?param=hi").then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}

options(url: string);

javascript 复制代码
export default {
  name: 'App',
  methods: {
    optionsTest: function () {
      this.$axios({
        method: "OPTIONS",
        url: "/demo/optionsTest",
        params: {
          param: "hi"   //同样使用params
        }
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
    optionsTest1: function () {
      this.$axios.options("/demo/optionsTest?param=hi").then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}

put(url: string, data?: any);

javascript 复制代码
export default {
  name: 'App',
  methods: {
    putTest: function () {
      this.$axios({
        method: "PUT",
        url: "/demo/putTest",
        data: {
          param: "hello"    //使用data和params都可以
        }                    //data放置在请求体,params拼接在请求路径
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
    putTest1: function () {
      this.$axios.put("/demo/putTest", {param: "hello"}).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}

patch(url: string, data?: any);

javascript 复制代码
export default {
  name: 'App',
  methods: {
    patchTest: function () {
      this.$axios({
        method: "PATCH",
        url: "/demo/patchTest",
        data: {
          param: "hello"     //使用data和params都可以
        }                    //data放置在请求体,params拼接在请求路径
      }).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
    patchTest1: function () {
      this.$axios.patch("/demo/patchTest", {param: "hello"},).then(res => {
        console.log(res)
      }).catch(err => {
        alert(err)
      })
    },
  }
}
相关推荐
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工2 天前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码2 天前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19942 天前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光2 天前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥2 天前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司2 天前
Vue 3 前端工程化规范
前端·javascript·vue.js