手把手撸一个前后端分离Demo -- 通信配置篇

一、概述

经过配置代理解决了在前后端通信之间存在的跨域问题，接下来要实现的是配置Axios访问后端接口与配置Axios拦截器

二、文件配置

首先、在 src / utils / request.js 文件中配置Axios，创建Axios实例、配置请求、响应拦截器。以下是Axios配置

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import storage from "store"; //store.js

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  //headers请求头配置 (post请求数据处理)
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json' //设置post的JSON数据放到body里
  },
})

// request interceptor
service.interceptors.request.use(
  config => {
    //JWT令牌身份验证
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      //操作token鉴权都是判断localStorage里面的token状态
      config.headers['Authorization'] = storage.get('Access-Token');
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    return res;
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

注意点：

在创建Axios实例的时候 baseURL 处理的是发送请求的基础URL，接口URL的组成为BaseURL + requestURL。BaseURL统一配置接口的请求地址，requestURL代表的是具体那个接口的请求路由。

例如请求接口为 http://localhost:8888/api/Todo/getTodoList 那么这里Axios创建的实例请求的URL接口BaseURL就是 http://localhost:8888 ; requestURL就是 /api/Todo/getTodoList 但是在上篇中进行配置的时候已经将 BaseURL重写为 /api ，所以在做具体的接口文件时Axios传入的URL是 /api/Todo/getTodoList 即可代表整个接口请求地址。

VUE_APP_BASE_API代表的是 .env.development 文件中的环境变量
```
# base api
VUE_APP_BASE_API = '/'
```
配置请求拦截器与响应拦截器

(1)请求拦截器与响应拦截器的作用是在发出请求前做些什么和接收到响应之后做些什么。例如在发送请求前要从vuex中获取到token放到请求头中供后端接口解析请求头中的token验证请求发起者的身份；在接口响应的时候在响应拦截器中判断响应的状态码，来判断接口是否响应成功，失败的话弹窗显示对应状态码代表的意思(404、500)之类的状态码。最后将Axios实例导出供其他文件引用，配置对应的请求接口方法

其次，配置接口管理的方法存放在 src / api 下，这些文件统一处理接口请求。请求通常分为如下两种：GET请求与POST请求。这两种请求的配置方式有所不同，形式也会不一样。

import request from "@/utils/request"; //引入创建好的Axios实例

const todoApi = {
    getTodoList: "/api/Todo/getTodoList", //
    getFinishedList: "/api/Todo/getFinishedList"
}

//获取已完成列表 (get请求)
export function getFinishedList(){
    return request({
        url: todoApi.getFinishedList,
        method: 'get'
    });
}

//(查询字符串形式的get请求)  形式为参数在URL上显示：http://localhost:8888/api/Todo/getTodoList?userId='5'
export function getTodoList(params){
     return request({
         url: todoApi.getTodoList,
         method: 'get',
         params: params
       });
 }

//post请求：当有大量请求参数要发送到后端接口的时候查询字符串的形式就不够用了
//这个时候就需要将参数放到请求体body里面 在浏览器network的payload中可以看到向后端post了什么数据
//比如要查询一个列表，有很多的查询条件 这些查询条件就可以放到post请求体中
export function getTodoList(params){
    return request({
        url: todoApi.getTodoList,
        method: 'post',
        data: params
      });
}

//注意三种方式的请求格式

到此，配置Axios、请求响应拦截器以及接口请求处理大致就是这样。上述如有不对的地方还望指教。