Axios & fetch api & Promise & POST

https://github.com/axios/axios

https://appdividend.com/2018/02/20/vue-js-axios-tutorial/#Vue_js_Axios_Post_Example

http://codeheaven.io/how-to-use-axios-as-your-http-client/


  1. $ npm i -S axios

bug


  1. mounted() {
  2. console.log(`fetch data after mounted lifecycle!`);
  3. // let url = "http://localhost:8888/preview-user";
  4. // let url = "./preview-user.js";
  5. // let url = "./preview-user.json";
  6. let url = "http://10.1.5.202/es6-test/axios/preview-user.json";
  7. Axios.get(url)
  8. // .then(res => res.json())
  9. .then((res) => {
  10. let {
  11. data: json
  12. } = res;
  13. console.log(`json =`, json);
  14. console.log(`json.data =`, json.data);
  15. // console.log(`res.data.data =`, res.data.data);
  16. // console.log(`res =`, res);
  17. // console.log(`res.message =`, res.message);
  18. // console.log(`res.data.length =`, res.data.length, JSON.stringify(res.data[0], null, 4));
  19. });
  20. },

Axios & Fetch

https://stackoverflow.com/questions/40844297/what-is-difference-between-axios-and-fetch

https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/


vue & mounted

https://stackoverflow.com/questions/32413905/initializing-vue-data-with-ajax/32443886#32443886

vue & created

https://stackoverflow.com/questions/47635503/fetch-data-with-vue-from-web-api


Ajax

Asynchronous JavaScript And XML

https://en.wikipedia.org/wiki/Ajax_(programming)

pagination


  1. let table = new Uint8Array(100).map((item, i) => (item = i));
  2. table.slice(0, 50);
  3. table.slice(1*50, 1*50 + 50);

shit aliyun

  1. fetch(url, {
  2. body: `nickname=xxxxx&_csrf_token=MD2ToUvQZ-3fk-g-gxczDhwiptfdRBnA57isO7wjBSE`,
  3. cache: "no-cache",
  4. credentials: "same-origin",
  5. // credentials: "include",
  6. headers: {
  7. "Content-Type": "application/x-www-form-urlencoded",
  8. },
  9. method: "POST",
  10. mode: "cors",
  11. redirect: "follow",
  12. referrer: "no-referrer",
  13. })
  14. .then(res => res.json())
  15. .then(json => {
  16. // json
  17. console.log(`json =`, JSON.stringify(json, null, 4));
  18. return json;
  19. })
  20. .catch(err => console.error(`error =`, err));

shit aliyun


  1. fetch(url, {
  2. body: `nickname=xxxxx&_csrf_token=MD2ToUvQZ-3fk-g-gxczDhwiptfdRBnA57isO7wjBSE`,
  3. cache: "no-cache",
  4. credentials: "same-origin",
  5. // credentials: "include",
  6. headers: {
  7. "Content-Type": "application/x-www-form-urlencoded",
  8. },
  9. method: "POST",
  10. mode: "cors",
  11. redirect: "follow",
  12. referrer: "no-referrer",
  13. })
  14. .then(res => res.json())
  15. .then(json => {
  16. // json
  17. console.log(`json =`, JSON.stringify(json, null, 4));
  18. return json;
  19. })
  20. .catch(err => console.error(`error =`, err));

Axios & fetch api & Promise & POST的更多相关文章

  1. 基于Promise规范的fetch API的使用

    基于Promise规范的fetch API的使用 fetch的使用 作用:fetch 这个API,是专门用来发起Ajax请求的: fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这 ...

  2. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

  3. vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...

  4. Fetch API与POST请求那些事

    简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...

  5. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  6. Ajax新玩法fetch API

    目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...

  7. 取消Fetch API请求

    如今,Fetch API已经成为现在浏览器异步网络请求的标准方法,但Fetch也是有弊端的,比如: Fetch还没有方法终止一个请求,而且Fetch无法检测上传进度 现在我们可以通过 AbortCon ...

  8. Fetch API 接口参考

    前言 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题,Fetch API 提供了一个获取资源的接口(包括跨域请求),任何使用过 XMLHttpRequest 的人都能 ...

  9. fetch API 简单解读

    http://f2e.souche.com/blog/fetch-api-jie-du/?utm_source=tuicool&utm_medium=referral 在我们日常的前端开发中, ...

随机推荐

  1. 修改SecureCRT默认会话字符集

    修改SecureCRT默认会话字符集 1.找到SecureCRT配置文件 Default.ini 2.修改Default修改为UTF-8 将S:"Output Transformer Nam ...

  2. Java删除文件或目录及目录下所有文件

    一直在做C++相关开发的工作.突然某一天一时兴起,想学习下Java开发.然后再网上找到一本Java简明教程,入门是够用了.看到文件IO这一章,想起之前用C++做的删除文件或目录的练习,于是打算用Jav ...

  3. 图解HTTP-1.web和网络基础

    目录 1. 3 项 WWW 构建技术 2. TCP/IP 是互联网相关的各类协议族的总称 协议(protocol) TCP/IP分层管理 TCP/IP通信传输流 封装(encapsulate) 3. ...

  4. Mybatis与Hibernate区别

    Mybatis与Hibernate区别 mybatis: 1. 入门简单,即学即用,提供了数据库查询的自动对象绑定功能,而且延续了很好的SQL使用经验,对于没有那么高的对象模型要求的项目来说,相当完美 ...

  5. JSP页面字符集设置

    错误提示: HTTP Status 500 - /test1.jsp (line: 2, column: 1) Page directive must not have multiple occurr ...

  6. centOS初了解--***安装node

    在***买了一个VPS,用了差不多一年了,除了做FQ使用之外,同时也下载了一个node,用了express搭建了一个服务,同时我在博客园有博客,我也懒得转来转去了,直接做了一个重定向,跳转到了博客园. ...

  7. javascript常用代码片段

    /** * * @desc 判断两个数组是否相等 * @param {Array} arr1 * @param {Array} arr2 * @return {Boolean} */ function ...

  8. 记 判断手机号运营商function

    /* 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.152.155.156.185.186 电信: ...

  9. C语言基础篇(二)运算符

    导航: 2.1 算数运算符 2.2 逻辑运算符 2.3 位运算 2.4 赋值运算 2.5 内存访问符号 ----->x<------------->x<------------ ...

  10. Diycode开源项目 如何解决InputMethodManager造成的内存泄漏问题

    1.内存泄漏的状况及原因 1.1.利用LeakCanary查看内存泄漏的状况 1.2.内存泄漏怎么产生的呢? InputMethodManager.mServicedView持有一个最后聚焦View的 ...