<!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. 项目部署到tomcat，验证部署成功

    1.假设你已经知道打war包放上去了tomcat 下的webapps下 2. bin->启动startup.bat 3.浏览器中启动 http://ip:port    这个port是tomca ...

  2. Nginx配置服务器宕机策略

    Nginx解决服务器宕机问题,Nginx配置服务器宕机策略,如果服务器宕机,会找下一台机器进行访问        配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location ...

  3. Java代码手段防止非法请求——防盗链

    Java代码手段防止非法请求,思路如下:        1. 获取到当前请求的域名,如www.a.com        2. 获取到请求资源的上一个地址        3. 判断上一个地址是否为空,如 ...

  4. Echart的使用legend遇到的问题小记

    Echart的图标真的很漂亮,使用也相对简单.但是官网的配置项的例子我不是很能快速的使用,得思考一会.哈哈,可能我比较笨吧. 在作柱状图的时候,我是通过Ajax动态获取的数据,但是图例legend就是 ...

  5. arm学习笔记

    学习ARM也有一定时间了,想想还是记点东西,要不以后就忘了.这是我的第一片,简简单单.但比较基础.1. ARM中一些常见英文缩写解释MSB:最高有效位:LSB:最低有效位:AHB:先进的高性能总线:V ...

  6. .gitignore文件说明-git提交时可忽略的文件

    在我们平时做项目时,总有一些文件不想提交到服务器的版本管理上 这时就要设置相应的忽略规则,来忽略这些文件的提交 规则 作用/mtk 过滤整个文件夹*.zip 过滤所有.zip文件/mtk/do.c 过 ...

  7. Python标准库之shelve模块(序列化与反序列化)

    shelve模块是一个简单的key,value将内存数据通过文件持久化的模块,可以持久化任何picklel可支持的Python数据格式. 序列化 序列化源代码: import shelve impor ...

  8. 126. 单词接龙 II

    题目: 链接:https://leetcode-cn.com/problems/word-ladder-ii/ 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出 ...

  9. join方法，wait()和sleep()

    join方法解释:方法x.join()的作用是使所属线程x 正常执行run()中的方法,而使得调用x.join()的线程处于无限期阻塞状态,等待x线程销毁后再继续执行线程z后面的代码. 1.方法joi ...

  10. DE1_MSEL

    基础的一般实验:01001(现在用的)或10010 马上换linux,做个记录: sd卡启动linux系统时,启动开关0至4位拨至00000