前后端数据交互之Axios
一、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>