一、Axios的安装

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 库，在vue中相较于Ajax有许多优点，我们接下来就直接介绍如何进行安装。

axios的中文官方文档：http://www.axios-js.com/

yarn 安装命令：

yarn add axios

也可以用官网提供的命令安装：

npm install --save axios vue-axios

二、封装Request请求

我们可以在vue的src下建一个utils文件夹，然后里面再建一个request.js文件

src > utils > request.js

在这个文件里添加以下代码：

//Axios的封装
import axios from 'axios'

const request = axios.create({
    baseURL: '//localhost:8080',
    timeout: 5000,
    headers:{
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
    }
});

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    // config.headers['Content-Type'] = 'application/json;charset=utf-8';
    // config.headers['Access-Control-Allow-Origin']='*';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error); // for debug
        return Promise.reject(error)
    }
);


export default request

三、前后端数据交互测试

（1）编写后端接口用于测试

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

/**
 * ClassName: TestController
 * Author: Admin
 * Date: 2022/4/30 22:44
 *
 * @description: TODO
 */

package com.example.demo.controller;

import org.springframework.web.bind.annotation.*;

/**
 * ClassName: TestController
 * Author: Admin
 * Date: 2022/4/30 22:44
 *
 * @description: TODO
 */

@RestController
@CrossOrigin("*")
@RequestMapping("/test")

public class TestController {

    @GetMapping
    public String test(@RequestParam String key){
        return key;
    }

}

（2）前端代码
App.vue

<template>
    <div style="margin:5px; float:left">
        <el-input v-model="key" placeholder="请输入关键字"  clearable style="width: 200px"/>
        <el-button type="primary"  style="margin-left:6px; float:right" @click="send" >发送</el-button>
    </div>
</template>

<style>

</style>
<script>

    import request from "./utils/request.js";

    export default {
        name: 'App',
        components: {

        },

        data(){
            return {
                key:'',
            }
        },

        methods:{
            send(){
                request.get("/test",{
                        params:{
                           key:this.key,
                        }
                    }
                ).then(res =>{
                    console.log(res);
                })

            }
        }
    }
</script>

上一篇：Vue+SpringBoot前后端分离教程三：Vue整合SpringBoot框架