axios框架：get和post请求

axios简介

axios是一个取代我们常用的jQuery中ajax模块的一个框架。可以说功能跟ajax类似。本篇文章就是使用axios完成get和post的请求。axios代码风格采用链式结构。

GET请求

axios.get("http://localhost:8081/qunar/query?id=1")
            .then(function (value) {
                //正常成功回调函数
                alert(value.data);
            })
            .catch(function (reason) {
                //异常回调函数
                alert(reason);
            });

说明：then是请求成功的回调函数。catch是请求异常的捕获函数。

POST请求

//POST主要是参数写法不一样
        axios.post("http://localhost:8081/qunar/query",{id:1})
            .then(function (value) {
                //正常成功回调函数
                alert(value.data);
            })
            .catch(function (reason) {
                //异常回调函数
                alert(reason);
            });

POST相比GET就是参数写作方式不一样。

后台SpringBoot的代码

主要是Controller层代码

package com.qianfeng.demo_boot_spring.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
public class AxiosController {

    @RequestMapping("query")
    public String queryString(Integer id){
        return "后台数据："+id;
    }
}

说明：@CrossOrigin是解决跨域问题。没有此注解，axios访问会出现Network Error异常。