<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    axios.get('http://localhost:3000/adata').then(function(ret){

      // 注意data属性是固定的用法，用于获取后台的实际数据

      // console.log(ret.data)

      console.log(ret)

    })

  </script>

</body>

</html>









<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    /*

      axios请求参数传递

    */

    // axios get请求传参

    // axios.get('http://localhost:3000/axios?id=123').then(function(ret){

    //   console.log(ret.data)

    // })

    // axios.get('http://localhost:3000/axios/123').then(function(ret){

    //   console.log(ret.data)

    // })

    // axios.get('http://localhost:3000/axios', {

    //   params: {

    //     id: 789

    //   }

    // }).then(function(ret){

    //   console.log(ret.data)

    // })

    // axios delete 请求传参

    // axios.delete('http://localhost:3000/axios', {

    //   params: {

    //     id: 111

    //   }

    // }).then(function(ret){

    //   console.log(ret.data)

    // })

    // axios.post('http://localhost:3000/axios', {

    //   uname: 'lisi',

    //   pwd: 123

    // }).then(function(ret){

    //   console.log(ret.data)

    // })

    // var params = new URLSearchParams();

    // params.append('uname', 'zhangsan');

    // params.append('pwd', '111');

    // axios.post('http://localhost:3000/axios', params).then(function(ret){

    //   console.log(ret.data)

    // })

    // axios put 请求传参

    axios.put('http://localhost:3000/axios/123', {

      uname: 'lisi',

      pwd: 123

    }).then(function(ret){

      console.log(ret.data)

    })

  </script>

</body>

</html>







<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    /*

      axios 响应结果与全局配置

    */

    // axios.get('http://localhost:3000/axios-json').then(function(ret){

    //   console.log(ret.data.uname)

    // })

    // 配置请求的基准URL地址

    axios.defaults.baseURL = 'http://localhost:3000/';

    // 配置请求头信息

    axios.defaults.headers['mytoken'] = 'hello';

    axios.get('axios-json').then(function(ret){

      console.log(ret.data.uname)

    })

  </script>

</body>

</html>





<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    /*

      axios拦截器

    */

    axios.interceptors.request.use(function(config) {

      console.log(config.url)

      config.headers.mytoken = 'nihao';

      return config;

    }, function(err){

      console.log(err)

    })

    axios.interceptors.response.use(function(res) {

      // console.log(res)

      var data = res.data;

      return data;

    }, function(err){

      console.log(err)

    })

    axios.get('http://localhost:3000/adata').then(function(data){

      console.log(data)

    })

  </script>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    /*

      async/await 处理异步操作：

      async函数返回一个Promise实例对象

      await后面可以直接跟一个 Promise实例对象

    */

    axios.defaults.baseURL = 'http:localhost:3000';

    // axios.get('adata').then(function(ret){

    //   console.log(ret.data)

    // })

    // async function queryData() {

    //   var ret = await axios.get('adata');

    //   // console.log(ret.data)

    //   return ret.data;

    // }

    async function queryData() {

      var ret = await new Promise(function(resolve, reject){

        setTimeout(function(){

          resolve('nihao')

        },1000);

      })

      // console.log(ret.data)

      return ret;

    }

    queryData().then(function(data){

      console.log(data)

    })

  </script>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    /*

      async/await处理多个异步任务

    */

    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {

      var info = await axios.get('async1');

      var ret = await axios.get('async2?info=' + info.data);

      return ret.data;

    }

    queryData().then(function(data){

      console.log(data)

    })

  </script>

</body>

</html>

vue axios使用的更多相关文章

  1. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  2. vue axios拦截器 + 自编写插件 实现全局 loading 效果；

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  3. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  4. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  5. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

  6. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  7. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

  8. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  9. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截，axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  10. Vue+axios（interceptors） 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果

    axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...

随机推荐

  1. MapReduce第一个项目 WordCount

    参考自林子雨大数据教学:     http://dblab.xmu.edu.cn/blog/hadoop-build-project-using-eclipse/ 创建一个文件夹:放入一个文本文件:填 ...

  2. Learn from Niu

    创新的源头来自于思考,尤其是深度思考: 1. 读博过程必然会经历痛苦,思考,深度思考这么一个过程,其中思考是最重要的,尤其是深度思考. 思考之后才是创新. 2. 借用其他的知识弥补这个领域的知识,不简 ...

  3. gitlab 更换服务器后访问 Integrations 出现 500 错误

    异常问题解决方案:问题:gitlab 更换服务器后访问 Integrations 出现 500 错误解决方案:从原服务器上将 /etc/gitlab/gitlab-secrets.json 复制过来覆 ...

  4. Redis Desktop Manager 连接不上redis的问题

    1.需要启动redis,进入后测试,ping,回应pong,说明redis可用 启动redis的代码: redis-server /myredis/redis.conf redis-cli 如果还是连 ...

  5. two pointers思想 ---- 利用两个i, j两个下标，同时对序列进行扫描，以O(n)复杂度解决问题的一种思想

    two pointers思想 ---- 利用两个i, j两个下标,同时对序列进行扫描,以O(n)复杂度解决问题的一种思想, 如果能用这种思想解决问题,那么会大大降低程序的复杂度. 两个利用这个思想的例 ...

  6. 解决前端js、css缓存问题

    去js标签库查询jquery.i18n.properties.js这个js引用到页面上: 新建一个配置文件:用上面的那个js方法调取配置文件里的版本号给其他的js加上: 示例: <script ...

  7. EF CodeFirst 一对一、一对多、多对多关系

    一对一关系 如图,无需专门指定,系统会默认在Person表中生成字段Pet_Id为Pet表的外键(一对一). Require:必要的(一对一)  Optional:可选的(一对零)  Principa ...

  8. 五、抗DDOS防火墙

    简介 DDoS全名是Distribution Denial of service (分布式拒绝服务攻击).拒绝服务攻击的攻击方式有很多种,最基本的Dos攻击就是利用合理的服务请求来占用过多的服务资源, ...

  9. 【牛客小白月赛21】NC201605 Bits

    [牛客小白月赛21]NC201605 Bits 题目链接 题目描述 Nancy喜欢做游戏! 汉诺塔是一个神奇的游戏,神奇在哪里呢? 给出3根柱子,最开始时n个盘子按照大小被置于最左的柱子. 如果盘子数 ...

  10. CentOS7.5升级OpenSSH

    实验环境 OS:CentOS 7.5 当前openssh版本:OpenSSH_7.4p1 升级后的openssh版本:OpenSSH_8.0p1 开通telnet 为了防止升级过程中ssh断连,保险起 ...