<!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. java注释英语自动机翻

    一.简介 每次面试都被怼spring源码你看过吗?你用spring开发源码你都不看的吗?这样怎么开发?那我就下点决心,趁着现在疫情在家宅,我要看spring源代码.但是发现注释都是英文,勉勉强强能看懂 ...

  2. 如何将.sql文件导入到mysql的数据库中

    首先通过cmd的net start mysql57 启动mysql的服务器 然后,输入命令:mysql -h 127.0.0.1 -u root -p来启动mysql服务 最后 上图画红圈的部分是.s ...

  3. [Python]Python日期格式和字符串格式相互转换

    由字符串格式转化为日期格式的函数为: datetime.datetime.strptime() 由日期格式转化为字符串格式的函数为: datetime.datetime.strftime() # en ...

  4. JUC-JUC是什么？

    一.JUC是什么? java.util.concurrent在并发编程中使用的工具类 进程/线程回顾 1.进程/线程是什么? 进程:进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动.它是 ...

  5. 【转】VS2017离线安装

    [转自]https://www.cnblogs.com/feigao/p/8409606.html 第一步:下载离线安装包 https://www.visualstudio.com/zh-hans/d ...

  6. [CodeForces]Educational Round 52

    幸好我没有打这场,我VP的时候在C题就卡死了,我果然还是太菜了. A Vasya and Chocolate 题意:一个巧克力\(c\)元,买\(a\)赠\(b\),一共有\(n\)元,问能买几个巧克 ...

  7. Itext相关知识

    最近需求用到office和pdf相关知识,office使用poi操作的,pdf则使用Itext操作 Itext官网: http://itextpdf.com/ Itext7相关使用示例:https:/ ...

  8. windows查询端口，杀进程

    C:\Users\chenquan>tasklist | findstr 4720Thunder.exe 4720 Console 1 3,456 K C:\Users\chenquan> ...

  9. js面向对象的程序设计 --- 下篇 继承启蒙

    继承是oo语言中一个最为人津津乐道的概念.ECMAScript支持实现继承,而且实现继承只要是靠原型链来实现的 ·原型链 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾一 ...

  10. ts中接口的用法

    ts中的接口主要的作用是: 对“对象”进行约束描述 对“类”的一部分行为进行抽象 一.属性接口 接口中可定义 确定属性.可选属性.任意属性.只读属性 1.确定属性 interface UserInfo ...