【axios】-- axios 二次封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了【axios】-- axios 二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基本封装部分

基本全局配置

如baseUrl，超出时间等

Token，密钥等

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

响应的统一基本处理

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

封装的请求办法

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

例子文章来源地址https://www.toymoban.com/news/detail-704474.html

// 配置全局的基础配置: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

到了这里，关于【axios】-- axios 二次封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！