Javaweb基础-axios

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

GET方法

get请求第一种写法

//后端
@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=hiparam: "hi"        // 后端被@RequestParam标记的参数名为param}}).then(res => {        //返回参数console.log(res)}).catch(err => {       //异常alert(err)})}}
}

get请求第二种写法

//后端
@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请求第一种写法

    //后端@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=hiparam: "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标记的对象接收。

//后端@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);

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);

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);

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);

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);

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)})},}
}