• axios header 动态添加 token


    解决方案:

    // 请求发前拦截,header中添加token
    axios.interceptors.request.use(res => {
        res.headers.common['X-Token'] = storage.get('token') || ''
        return res;
    });

    非常简单,使用axios的拦截器,发送请求前从缓存中读取,没有则为空 (重要)。

    官网方法:

    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
      }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      });

    我的问题:

    我封装了一个基于axios的http类(欢迎补充):

    import axios from 'axios'
    import storage from '../utils/storage'
    import Vant from 'vant'
    // import qs from 'qs'
    import { config } from './config'
    
    const tips = {
        1: '抱歉,出现了一个错误'
    }
    
    var instance = axios.create({
        baseURL: config.base_url
    });
    
    // 中文乱码解决
    // instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    // 请求发起前拦截 使用qs序列化字符串,处理发送请求的参数
    
    
    // 请求发前拦截,header中添加token
    instance.interceptors.request.use(res => {
        res.headers.common['X-Token'] = storage.get('token') || ''
        return res;
    });
    
    class Http {
    
        // get 请求
        get(url, params) {
            const result = instance.get(url, { params: params })
            result.then(res => {
                if (res.data.message) {
                    Vant.Toast.fail(res.message)
                }
            })
            return result
        }
    
        //post 请求
        post(url, params) {
            const result = instance.post(url, params)
            result.then(res => {
                // 请求打印出来 debug
                console.log(res)
                if (res.data.message) {
                    Vant.Toast.fail(res.data.message)
                }
            })
            return result
        }
    
        // 发送 字符串类型
        postStr(url, params) {
            const headers = {
                'Content-type': 'application/x-www-form-urlencoded'
            }
            return instance.post(url, params, headers)
        }
    
        // 并发请求
        all(array, callback) {
            instance.all(array)
                .then(axios.spread(function (acct, perms) {
                    callback({ acct, perms })
                    // 两个请求现在都执行完成
                }));
        }
    
        // 展示良好的错误提示
        show_error(error_code) {
            if (!error_code) {
                error_code = 1
            }
            const tip = tips[error_code]
            Vant.Toast.fail(tip)
        }
    
    }
    
    export { Http }
  • 相关阅读:
    浅谈工作流的作用
    WinForm上播放Flash文件
    C#反序列化 “在分析完成之前就遇到流结尾”
    UML类图详解
    关于C#中Thread.Join()的一点理解
    c# 反射的用法
    C#多线程学习笔记之(abort与join配合使用)
    UML用例图总结
    asp.net 发布到IIS中出现”处理程序“PageHandlerFactoryIntegrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”“错误的解决方法
    C#序列化和反序列化
  • 原文地址:https://www.cnblogs.com/likewpp/p/11098314.html
Copyright © 2020-2023  润新知