【axios】-- axios 二次封装

基本封装部分

基本全局配置

如baseUrl，超出时间等

Token，密钥等

出于权限和安全考虑的密钥设置到请求头

响应的统一基本处理

主要针对于错误的情况做全局统一处理

封装的请求办法

把对接口的请求封装为一个方法

例子

// 配置全局的基础配置:baseUrl,timeout,header,responType,withCredentials
import axios from "axios"
import router from "@/router"
 
// 也可以把请求拦截器里的定义的东西提取出来，创建一个js文件（配置中心），在配置中心统一定义（后续好维护），通过import引入进来
 
// base64
import {Base64} from "js-base64"
// 后面的请求用request来发
let request = axios.creat({
    // 基础配置
    baseURL:'http://localhost:9090/',
    // timeout表示请求超过timeout时间没有响应就中断（单位为毫秒）
    timeout:30*1000,
    // responseType:"json" 规定后端返回的数据格式，默认值是json
    responseType:"json",
    headers:{
        // 看有没有什么特殊的header要加
    }
})
 
// 请求拦截器
request.interceptors.request.use((config)=>{
    // token密钥的设置
    let token = localStorage.getItem("token");
    let user = localStorage.getItem("user")
    // 如果有值，代表以及登录了。这块我还没有详细区分这两个，都先判断，等研究这个的时候再来重写
    if (token || user){
        // 记得输出一下token和保存的user，下面的赋值，取决于user 的输出
        config.headers.token = token
    }
 
    // 密钥-secretId + 特殊算法（防止别人把token复制出来伪造请求）jwt记得研究一下
    let secretId = "hello";
    let secret = Base64.encode(secretId+new Date().toString()); //这里用的是后面加上时间戳，这个需要后端也加，然后进行比对就知道是不是客户端发送的了。记得要进行加密
    config.headers.secret = secret;
    return config
},error =>{
    // 请求出错了
    return Promise.reject(new Error(error))
})
 
// 响应拦截器
request.interceptors.response.use((res)=>{
    // 响应的统一处理(一般是来判断后端返回的状态码)
    // 只要发送成功，默认200
    const status = res.data.code || 200
    // 如果没有附带消息，默认"未知错误"
    const message = res.data.msg || "未知错误"
    if(status === 401){
        // 没权限，重新登录
        router.push("/login")
    }
},error =>{
    // 组件库的提示，$waring
    return Promise.reject(new Error(error))
})
 
export default request