首页 > 其他分享 >mock拦截axios请求,以及axios请求拦截设置token

mock拦截axios请求,以及axios请求拦截设置token

时间:2023-06-01 22:33:03浏览次数:36  
标签:axios 请求 token 拦截 config mock


 

直接上源码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>mock拦截axios请求</title>
</head>

<body>

    <!-- 本地npm安装mock和axios -->
    <!-- <script src="../node_modules//mockjs//dist//mock.js"></script> -->
    <!-- <script src="../node_modules/axios//dist/axios.js"></script> -->

    <!-- 官方在线引入地址(推荐使用本地) -->
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*************** axios拦截配置 ***************************************************/
        /**
         * 请求拦截
         */
        axios.interceptors.request.use(config => {
            console.log(config);

            //可以通过该参数修改请求的地址  ,config 还有很多参数可以设置如,请求超时时间等等
            //config.url = 'data2.json' 

            // 从本地存储中获取token,当然这里也可以从cookie中获取token
            let token = localStorage.getItem('token');
            if (token) {
                // 设置请求头中token的参数
                config.headers.common['token'] = localStorage.getItem('token');
            }

            return config;
        });

        /**
         * 响应拦截
         */
        axios.interceptors.response.use(response => {
            return response;
        });
        /********************************************************************************/


        /*************** mock模拟数据 ****************************************************/
        // mock数据拦截http://121.36.146.10:8084/industry请求 模拟响应数据
        Mock.mock('http://121.36.146.10:8084/industry', {
            'data': [{
                id: 1,
                iId: 0,
                industryName: "互联网/IT/电子/通信"
            }, {
                id: 2,
                iId: 0,
                industryName: "房地产"
            }, {
                id: 3,
                iId: 0,
                industryName: "金融业"
            }, {
                id: 4,
                iId: 0,
                industryName: "建筑业"
            }],
            'msg': "ok",
            'status': 200
        });
        /********************************************************************************/


        //设置全局的baseURL
        axios.defaults.baseURL = 'http://121.36.146.10:8084/'

        axios.get('industry').then(res => {
            console.log(res.data) // 直接打印res可以显示很多数据 如响应头信息等等
        });
    </script>
</body>

</html>

 

 

 

 

 

 

 

标签:axios,请求,token,拦截,config,mock
From: https://blog.51cto.com/u_14671216/6398512

相关文章

  • net 6使用FluentValidation校验请求数据
    1,nuget增加FluentValidation.AspNetCore2.DI中添加builder.Services.AddFluentValidation(opt=>{opt.RegisterValidatorsFromAssembly(Assembly.GetEntryAssembly());});3.添加具体的校验类usingFluentValidation;namespaceEShopWebApi.Controllers;public......
  • Get请求
     GET不支持GetRequestStream(),所以不能写进去:stringbaseUrl="http://";stringtoken="";try{HttpWebRequestrequest=(HttpWebRequest)HttpWebRequest.Create(......
  • 对接第三方接口教程(发送Http请求及返回参数处理)
    1.首先Http工具类建议使用 packagecn.hutool.http;//这个包下面的HttpUtil.post(StringurlString,Stringbody)这个方法会省去很多事情,不用去设置header的一些基本东西,get就不说了,get也能用post请求,把参数拼url后边就行了2.要看第三方接口的鉴权是如何做的,如果是t......
  • python目录扫描工具——dirsearch使用,可以使用御剑的字典 支持慢速扫描,一般使用-s 60
    使用御剑的字典:pythondirsearch.py-uxxx.com-e*-w/media/dir_dict/ASP.txt,/media/dir_dict/ASPX.txt,/media/dir_dict/DIR.txt,/media/dir_dict/JSP.txt,/media/dir_dict/MDB.txt,/media/dir_dict/PHP.txt 非常好用!!!如下是御剑的字典文件。 进入dirsearch目录,进行扫描在这......
  • uniapp onShareAppMessage里面请求后调分享(微信小程序)
    onShareAppMessage(){constpromise=newPromise(resolve=>{request({api:'请求名',method:'POST',data:{"data":{}}}).then(res=>{resolve({......
  • HTTP请求头的含义
    http请求中常用的请求头的含义:Accept:告诉服务器,客户端支持的数据类型。Accept-Charset:告诉服务器,客户端采用的编码。Accept-Encoding:告诉服务器,客户机支持的数据压缩格式。Accept-Language:告诉服务器,客户机的语言环境。Host:客户机通过这个头告诉服务器,想访问的主机名。If-Modified......
  • Vue07-Axios
    Axiosaxios是一个网络请求相关的库。axios:ajaxi/osystem使用axios编写的网络请求代码,可以运行在浏览器端,也可以在Node环境中运行。01.支持的请求方式axios(config)axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head......
  • Postman请求Azure的OpenAI
    界面是: AZURE_OPENAI_ENDPOINT/openai/deployments/deployment_name/chat/completions?api-version=2023-05-15注意Body下的raw选json格式 {"messages":[{"role":"system","content":"......
  • 果然python是直接可以使用requests去请求https站点的,意味着一般的扫描工具可以直接扫
    #coding:utf-8importrequests#请求地址#url="https://www.qlchat.com"url="https://www.baidu.com"headers={'user-agent':'Mozilla/5.0(WindowsNT10.0;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chro......
  • QA|selenium打开浏览器后没有执行后面的代码(get请求)|UI自动化测试
    Q:selenium打开浏览器后没有执行后面的代码(get请求)代码如图: 原因:webdriver_path应该给的是chromedriver.exe的路径,而不是chrome.exe的路径,写错了,正确的如下: 查阅参考:Selenium打开浏览器,但拒绝执行下一行代码-我爱学习网(5axxw.com)......