首页 > 其他分享 >vue中配置使用axios

vue中配置使用axios

时间:2023-05-05 09:56:45浏览次数:43  
标签:axios return script url 配置 instance vue config

简单示例代码:

请求网络的js逻辑,可以放到request.js文件中,放在目录utils下;

import axios from "axios";


axios.defaults.withCredentials=true;

//创建axios实例
const instance = axios.create({
    // `headers` 请求头的通用配置
    headers: {
        // 'X-Requested-With': 'XMLHttpRequest'
    },
    baseURL: 'https://localhost:8080/api',//远程的api地址
    timeout: 120000, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证
});

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 设置Content-Type、token等等
        if(!config.headers["Content-Type"]){
            config.headers["Content-Type"]="application/json";
        }
        config.headers["auth"]=localStorage.getItem("token");
        //config.headers["openid"]=localStorage.getItem("openid");  

        return config;
    },
    error => {
        //统一错误处理...
        return Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    response => {
        if (response.status === 200) {
            if(response.data.ResultCode==401){//说明token过期或者鉴权失败
                alert('鉴权失败,您将强制退出登录');
                //清空token
                localStorage.removeItem("token");
                //跳转到登录页
                return router.push('/login');
            }
            return response.data;
            //return response; // 正常返回
        } else {
            return Promise.reject(reponse);
        }
    },
    error => {
        //错误处理...
        return Promise.reject(error);
    }
);



//http post请求
const post = (url,query) => {
    return instance.post(url,JSON.stringify(query));
};

//http get请求
const get = (url,query) => {
    return instance.get(url,query);
};


function request(config) {
    return instance.request(config);
}
function jsonp(url, jsonp='callback') {
    if (!window) console.error('当前为非浏览器环境,发送jsonp失败');
    return new Promise((resolve, reject) => {
        let _script = document.createElement('script');
        _script.type = 'text/javascript';
        let _callbackFunctionName = '__axios__yt__callback'+Date.now();
        _script.src = (/\?[^=]+=/.test(url)) ? (url+'&'+jsonp+'='+_callbackFunctionName) : (url+'?'+jsonp+'='+_callbackFunctionName)
         
        window[_callbackFunctionName] = (result) => {
            resolve(result);
            document.getElementsByTagName('head')[0].removeChild(_script); //删除临时script标签
            window[_callbackFunctionName] = null; //删除临时回调
        }
        document.getElementsByTagName('head')[0].appendChild(_script);
    })
}



export default {
    instance,
    request,
    jsonp,
    post,get
}

 

标签:axios,return,script,url,配置,instance,vue,config
From: https://www.cnblogs.com/Tpf386/p/17373221.html

相关文章

  • 虚拟机配置bond网卡mode为4的提醒解决
    虚拟机配置bond网卡mode模式为4时控制台一直循环输出:May411:32:03local-huajingkernel:bond0:(slaveens33):Anillegalloopbackoccurredonslave#012Checktheconfigurationtoverifythatalladaptersareconnectedto802.3adcompliantswitchportsMay4......
  • Gradle安装配置教程
    一、安装前检查检查电脑上是否安装JDK,如果没有安装,请查看JDK安装教程:点击查看如果电脑上已经安装JDK,按Win+R键,输入cmd,然后点击确定输入java-version,点击回车,查看JDK安装信息,如果有下面提示信息,说明JDK安装成功二、Gradle下载打开官网下载界面:https://gradle.or......
  • STP02(配置命令)
    1.MSTP  -默认情况下,所有的VLAN都属于实例0(系统的默认instance);  -一个MSTP网络中,可以同时包含多个region;  -每个MSTregion中可以包含多个instance(MSTI)  -属于相同region的交换机上,以下参数必须相同:     #region-name     #实例与vlan的映射关系必......
  • java基于springboot+vue的宿舍管理系统、学生宿舍管理系统、高校宿舍管理系统,附源码+
    1、项目介绍java基于springboot+vue的宿舍管理系统、学生宿舍管理系统、高校宿舍管理系统,实现管理员:首页、个人中心、公告信息管理、院系管理、班级管理、学生管理、宿舍信息管理、宿舍安排管理、卫生检查管理、报修信息管理、报修处理管理、缴费信息管理,学生;首页、个人中心、公......
  • Linux配置添加自定义shell脚本需要的PATH
    Linux添加自定义shell脚本记录下,便于之后复习使用。1.确定一个目录e.g.#到达用户目录cd~#创建一个bin文件夹来放脚本文件mkdirbincd./binpwd得到的是/root/bin2.把这个路径放到PATH中cd~#可以用ls-a看一看有没有.branrc文件vim~/.bashrc#编辑最后加入......
  • springboot mvc配置原理+扩展springmvc(重点)
    1.新建config目录2.在config目录下创建自定义配置类3.根据官方文档得到要有注解@Configuration并且继承类WebMvcConfigurer 扩展springmvc:我们慢慢脱离了原始的繁琐的xml配置,现在转向javaconfig配置 最后扩展->springmvc配置原理源码:注意点:springmvc的配置在springboo......
  • vue 选择图片或者拍照上传,数据在外层取不到/拿不到解决。
    <inputtype="file"accept="image/*"capture="camera"@change="onImageChange"class="inputClass"/>//调用asynconImageChange(e){this.capImg=awaitthis.onImageChange(e)console......
  • vue-esign 学习笔记
    1注意事项最新版是1.1.4,我们项目组用的是1.1.0。从npmjs可以看出,两个版本中间的版本都是不可用的,下载量为0.除此之外还可以参考的类似工具:https://www.npmjs.com/package/vue-esignaturevue-esignaturehttps://www.npmjs.com/package/vue3-esignvue3-esign2链接地址http......
  • springboot 多环境配置及配置文件的位置
    了解即可  ......
  • Vue3 h函数渲染组件
    1、渲染ElSelect组件constmodulleFilters=ref([{label:1,value:2},{label:2,value:3},]);constsearch=ref('');consttableColumn=[{prop:'module',label:'模块',headerRender:()=>h(......