axios简单使用(附后端代码)

官方文档:
https://www.kancloud.cn/yunye/axios/234845

特征:

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装:

使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js">script>

eg:前段:


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
	<br />
	<br />
	<br />
	<button>get请求button>
	<br />
	<br />
	<br />
	<button>put请求button>
	<br />
	<br />
	<br />
	<button>delete请求button>
	<br />
	<br />
	<br />
	<button>put请求button>
	<br />
	<br />
	<br />
	<button>执行并发请求button>

body>
<script type="text/javascript" src="../js/jquery.js">script>
<script type="text/javascript" src="../js/axios.min.js">script>
<script type="text/javascript">
	$(function() {
		//get
		$('button').eq(0).click(function() {
				axios.get('http://localhost:8080/axios',{
					params:{
						id : 123
					}
				})
				.then(function(res){ 
					console.log(res);
					//{data: "This is get request---123", status: 200, statusText: "", headers: {…}, config: {…}, …}
				})
				.catch(function(res){
					console.log(res);
				});
		});
		//post
		$('button').eq(1).click(function() {
			
			axios.post('http://localhost:8080/axios',{
					name : "奥巴马"
			})
			.then(function(res){
				console.log(res);
				//{data: "This is post request---{"name":"奥巴马"}", status: 200, statusText: "", headers: {…}, config: {…}, …}
			})
			.catch(function(res){
				console.log(res);
			});

		});
		//delete
		$('button').eq(2).click(function() {
			
			axios.delete("http://localhost:8080/axios",{
				params:{
					id : 456
				}				
			})
			.then(function(res){
				console.log(res);
				//{data: "This is post request---奥巴马", status: 200, statusText: "", headers: {…}, config: {…}, …}
			})
			.catch(function(res){
				console.log(res);
			});

		});
		//put
		$('button').eq(3).click(function() {
			data = {
					name : "奥巴马",
					age : 100,
					sex : "男"
				};
			axios.put("http://localhost:8080/axios",data)
			.then(function(res){
				console.log(res);
				//{data: "This is put request{name=奥巴马, age=100, sex=火星}", status: 200, statusText: "", headers: {…}, config: {…}, …}
			})
			.catch(function(res){
				console.log(res);
			});
		});
		
		//并发请求 
		$('button').eq(4).click(function() {
			axios.all([method1(),method2()])
			.then(axios.spread(function(acct,perms){
				console.log(acct);
				console.log(perms);
				/* 
				{data: "This is get request---123", status: 200, statusText: "", headers: {…}, config: {…}, …}
				{data: "This is post request---奥巴马", status: 200, statusText: "", headers: {…}, config: {…}, …} */
			}))
		});
		
		function method1(){
			return axios.get('http://localhost:8080/axios',{
				params:{
					id : 123
				}
			})
		}
		
		function method2(){
			return axios.post('http://localhost:8080/axios',{
					name : "奥巴马"
			})
		}
		/* 
		axios.request(config)
		axios.get(url[, config])
		axios.delete(url[, config])
		axios.head(url[, config])
		axios.post(url[, data[, config]])
		axios.put(url[, data[, config]])
		axios.patch(url[, data[, config]]) */

	});
script>
html>

后端:

/**
 * @author : lichenfei 
 * @date : 2019年1月15日
 * @time : 下午6:57:59  
 *
 */
package com.lcf.controller;

import java.util.Map;

import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.lcf.entry.User;

/**
 * @author : lichenfei
 * @date : 2019年1月15日
 * @time : 下午6:57:59
 *
 */
@RestController
@RequestMapping("axios")
public class AxiosController {

    @GetMapping("")
    public String get(@RequestParam String id) {
	System.out.println(id);
	return "This is get request---"+id;
    }

    @PostMapping("")
    public String post(@RequestBody Map<String, Object> map) {
		System.out.println(map.get("name"));
	return "This is post request---"+map.get("name").toString();
    }

    @DeleteMapping("")
    public String delete(@RequestParam Integer id) {
		System.out.println(id);
	return "This is delete request---"+id;
    }

    @PutMapping("")
    //public String put(@RequestBody Map map) {//使用map接受参数
    public String put(@RequestBody User user) {//使用实体类接受参数
	System.out.println(user.toString());
	return "This is put request"+user.toString();
    }
    
}

实体类:

/**
 * @author : lichenfei 
 * @date : 2019年1月16日
 * @time : 下午4:12:19  
 *
 */
package com.lcf.entry;

import java.io.Serializable;

/**
 * @author : lichenfei
 * @date : 2019年1月16日
 * @time : 下午4:12:19
 *
 */
public class User implements Serializable {
    private String name;
    private String sex;
    private Integer age;

    public User() {
	super();
    }

    public User(String name, String sex, Integer age) {
	super();
	this.name = name;
	this.sex = sex;
	this.age = age;
    }

    public String getName() {
	return name;
    }

    public void setName(String name) {
	this.name = name;
    }

    public String getSex() {
	return sex;
    }

    public void setSex(String sex) {
	this.sex = sex;
    }

    public Integer getAge() {
	return age;
    }

    public void setAge(Integer age) {
	this.age = age;
    }

    @Override
    public String toString() {
	return "User [name=" + name + ", sex=" + sex + ", age=" + age + "]";
    }
    

}

有什么问题希望大佬多多指导.

你可能感兴趣的:(axios简单使用(附后端代码))