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異常。