AJ-Report项目分析（6）

2021SC@SDUSC

目录

 url生成

axios请求

get请求demo：

post请求demo：

get请求拦截器

post请求拦截器

关于export default service

本文不再分析页面代码，前文已经分析了一个页面，由于很多组件都是共享的，其他页面使用了相同的组件，可供分析的代码就少了很多。本文开始分析项目中的js文件，着重分析url的生成与发送。

js文件在src/api下

 url生成

axios请求

首先看axios.js文件

import axios from 'axios';
import {Message, MessageBox} from 'element-ui';

 第一行代码引入了axios，使得我们可以在vue中使用axios发送异步请求。

关于axios的用法：

get请求demo：

   <!--引入axios的相关依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //get方式请求
				//then代表请求响应回来时触发的回调函数，response代表响应内容，包括相应数据response.data，响应的状态码response.status，响应头response.headers等等
        axios.get('http://localhost:8888/axios/findAll?username=zhangsan&password=123')
            .then(function(response){
                console.log(response.data);
            })
            .catch(function(err){ //当请求出现错误时回调函数
                console.log(err);
            });
    </script>

post请求demo：

 <!--引入axios的相关依赖