<!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. 修改url中参数值

    1.一种方法function changeUrlArg(url, arg, val){ var pattern = arg+'=([^&]*)'; var replaceText = arg+ ...

  2. 理解LDAP与LDAP注入

    0x01 LDAP简介 LDAP,轻量目录访问协议 |dn :一条记录的位置||dc :一条记录所属区域||ou :一条记录所属组织||cn/uid:一条记录的名字/ID| 此处我更喜欢把LDAP和 ...

  3. pl/sql快速输入select * from等语句快捷键设置

    1.工具-->首选项 2.编辑器-->编辑 3.定义快捷键 -- > 保存 4.快捷键+回车就可以出现

  4. 目标检测,主要问题发展，非极大值抑制中阈值也作为参数去学习更满足end2end,最近发展趋势和主要研究思路方向

    目标检测,主要问题发展,非极大值抑制中阈值也作为参数去学习更满足end2end,最近发展趋势和主要研究思路方向 待办 目标检测问题时间线 特征金字塔加滑窗 对象框推荐 回归算法回归对象框 多尺度检测 ...

  5. Qtree1 - 树链剖分

    树剖裸题?(复习练练手) // luogu-judger-enable-o2 #include <bits/stdc++.h> using namespace std; ],size[], ...

  6. day06_类与对象、封装、构造方法

    02_面向对象与常用类 01_面向对象思想的概述 面向过程:当需要实现一个功能的时候,每个具体的步骤都需要亲力亲为,详细处理每一个细节. 面向对象:当需要实现一个功能的时候,不关心具体步骤,而是找一个 ...

  7. 逗号运算符与括号 - C语言

    例1 int x; int a=(x=2),12;// 赋值优先级高于逗号,相当于a=x=2,12是多余的 printf("a=%d",a); 结果:a=2 例2 int x; i ...

  8. SIFT算法原理（3）-确定关键点的主方位，构建关键点描述符

    介绍官网:https://docs.opencv.org/3.0-beta/doc/py_tutorials/py_feature2d/py_sift_intro/py_sift_intro.html ...

  9. NVMe over Fabrics 协议Discovery服务交互过程跟踪

    Discovery服务过程跟踪 对于NVMe over Fabrics的subsystem,有两种类型:Discovery子系统和NVM子系统.这里介绍与Discovery子系统相关的交互内容(即:在 ...

  10. 函数的应用_python

    一.各类函数应用 1.高阶函数:函数里面调用函数 例子: def add(a): return (a*a) def print_info(fun,c,d): #传入函数与参数 return fun(c ...