axios请求及响应拦截理解（游客身份拦截理解）

对axios进行基础配置

import axios from 'axios';  // 该处引入axios模块

// 构建axios实例
const instance = axios.create({
    baseURL: process.env.BASE_API,  // 该处url会根据开发环境进行变化（开发/发布）
    timeout: 10000  // 设置请求超时连接时间
})

 

request拦截器（请求发送后端之前）

因为每次发送请求都会 判断token,很麻烦，所以在请求拦截器中统一进行处理。

个人理解，request 拦截器并不像他的名字一样，进行拦截，发送不出去，而是对请求的数据进行处理，在发送请求。

就如游客访问的时候，因为没有 token 拦截器只会判断 post 请求头携不带 token，并不是请求没有发送出去。

当请求拦截出错的时候，会在 error 中执行显示。

instance.interceptors.request.use(
    config => {
        console.log(config);  // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
        config.headers.token = '该处可设置token内容';
        return config  // 对config处理完后返回，下一步将向后端发送请求
    },
    error => {  // 当发生错误时，执行该部分代码
        console.log(error); //调试用
        return Promise.reject(error)
    }
)

 

response拦截器（数据返回后，具体页面加载之前）

这里为响应拦截，数据返回页面前的行为，为什么要用这个响应拦截器呢？

这里也是使用了统一处理，如登录过期、没有登录要怎么处理，统一在此进行处理，否则，每次请求都要另外进行一次判断则显得很麻烦。

响应拦截器 就是对返回的数据进行处理

instance.interceptors.response.use(
    response => {  // 该处为后端返回整个内容
        const res = response.data;  // 该处可将后端数据取出，提前做一个处理
        if ('正常情况') {
            return response  // 该处将结果返回，下一步可用于前端页面渲染用
        } else {
            alert('该处异常');
            return Promise.reject('error')
        }
    },
    error => {
        console.log(error),
        return Promise.reject(error)
    }
)

 

将axios实例导出，方便其他页面调用

export default instance

 

其他页面调用上述实例发送请求

import instance from '../xxx.js';  // 将实例导入
const qs=require('qs');  // 用于处理前端发送数据格式
const base = process.env.BASE_URL;  // 该处根据开发环境变化

export const login = params => {return instance.post(`${base}/login`, qs.stringify(params)).then(res => res.data)}  // 该处即可实现向后端发送请求，并将数据返回给调用该接口的位置