<!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. LaTeX技巧004：LaTeX不用添加到目录制作书签技巧

    这里给大家介绍一个命令,需要hyperref宏包.该命令格式如下: \pdfbookmark[]{text}{anchor} \tableofcontents 顺序应该是这样,如果换过来,书签指向的位 ...

  2. 使用yum安装报错：[Errno 256] No more mirrors to try

    背景:我使用yum方式安装软件时,比如zabbix这种软件,我们在安装时一般都是直接到zabbix官网,按照官方的步骤进行安装,但是有一个问题,官方的服务器不在国内,时常会在安装时导致超时报错.此时解 ...

  3. npm 升级到最新版本

    先npm -v查看自己的npm 是否是最新版本,如果不是则进入安装node的文件夹,可通过 where node 查找该文件夹. 进入之后使用: npm i npm -g 之后使用: npm -v 查 ...

  4. Selenium3+python自动化013-自动化数据驱动及模型介绍

    一.查看当前运行的浏览等相关信息 driver=webdriver.Chrome() print(driver.capabilities["version"]) #浏览器版本 pr ...

  5. 使用 C++11 编写可复用多线程任务池

    类的功能 Task (任务基类) 该类主要实现一个任务类 virtual int doWork() = 0; TaskQueue (任务队列) 该类主要针对任务的存储.删除.撤回等状态做管理 Thre ...

  6. java 多线程实现四种方式解析Thread，Runnable,Callable,ServiceExcutor,Synchronized ,ReentrantLock

    1.Thread实现: import java.util.Date; import java.text.SimpleDateFormat; public class MyThread extends ...

  7. tp5 使用phpword 替换word模板并利用com组件转换pdf

    tp5   使用phpword 替换word模板并利用com组件转换pdf 一.首先composer安装PHPword,就不多说了 二.然后是把模板中要替换的部分用变量代替 三.把原始的模板文件放入项 ...

  8. AcWing 893. 集合-Nim游戏

    //只能拿某些特定个数的石子 #include <cstring> #include <iostream> #include <algorithm> #includ ...

  9. 题解【洛谷P2668】[NOIP2015]斗地主

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的 $ A $ 到 $ K $ 加上大小王的共 $ 54 $ 张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据 ...

  10. 516，base64的原理及优缺点

    优点是可以加密,减少了http请求 缺点是需要消耗cpu进行编解码 适用于小图片 base的体积约为原图的4/3