Vue简单使用axios进行请求响应

---

前言

我们在写html页面时，要么使用的是原生的js来进行请求，要么使用jquery的ajax来进行请求，现在我们在学习vue的时候，vue作者建议我们使用axios来进行请求，那么接下来让我们来看看吧

---

一、axios是什么？

其实简单来说，就是专门用来处理请求和响应的库，你也可以理解为插件。

二、axios与jquery的区别

axios只是针对请求响应这一块，但是jquery不同，请求响应只是它的一部分，jquery还包含了其它的东西，这也导致了jquery太过庞大了

三、安装axios

npm install axios

四、使用axios

1. 在vue项目中创建一个工具文件夹，名字为utils
2. 在utils文件夹中创建一个axiosUtils.js文件
3. 在axiosUtils.js文件中添加一下内容，构建axios基本使用配置

// 引用axios
import axios from "axios";
// 设置全局格式，告诉服务端/客户端以json格式解析数据
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

// 创建实例
const service = axios.create({
	/**
		你可以理解为地址前缀，比如你请求的地址是/user/getUser
		那么在请求的时候，会变成/dev/user/getUser
	**/
    baseURL: '/dev',
    /** 
    	请求限制时间，单位为毫秒，这里设置的是10秒
    	当该请求超过了10秒，那么该请求会被中断
    **/
    timeout: 10000
});

export default service;

4. 正式使用axios创建请求
   1. 在根目录创建一个api文件夹
   2. 在api文件夹中创建一个testApi.js
   3. 添加以下内容

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

// 登录
export function loginAPI(username, password, code, uuid) {
    const data = {
        username,
        password,
        code,
        uuid
    };
    return request({
        url: "/login",
        method: "post",
        data: data
    });
}

5. 后端接收参数

   /**
     * 登录
     * @param loginBody 前端参数
     * @return AjaxResult Class
     * 这里需要大家去了解下为什么要用@RequestBody注解来接收参数
     */
    @PostMapping("/login")
    public AjaxResult login(@RequestBody LoginBody loginBody){
        String token = loginService.login(loginBody);

        AjaxResult ajax = AjaxResult.success();
        ajax.put(UserConstants.TOKEN, token);
        return ajax;
    }

6. 路径问题
   这个时候，请求就全部搞定了，但是出现了一个新的问题，就是请求的路径是404，因为在第三步的时候，我们不是加了个baseURL，那么我们请求的地址就是/dev/user/getUser，但是我们实际请求的地址应该是localhost:8080/user/getUser，肯定会有朋友说，我们为什么不把baseURL改成localhost:8080，首先前端和后台启动的端口是不一样的，不同端口的地址访问不同端口的地址，会报跨域的问题。那么这个问题应该怎么解决，就需要用到vue-cli的代理，可以前往 解决Vue跨域访问后端API问题 了解详情

---

总结

以上就是使用axios来请求后端端口，希望大家喜欢