/*axios({
  method:"get",
  url:"./data.json",
  data:{
    id:10
  }
}).then((res)=>{
  console.log(res)
},(e)=>{
  console.log(e);
})*/

function axios(options) {
  let promise = new Promise((resolve, reject) => {  
    var xhr = new XMLHttpRequest();
    var data = "";
    //数据处理

    for (var key in options.data) {
    data += "&" + key + "=" + options.data[key]
    }

    if (options.method == "get") {

      let url = options.url + "?" + data.slice(1);
      xhr.open(options.method, url);
      xhr.send();
    } else if (options.method == "post") {

      xhr.open(options.method, options.url);
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
      xhr.send(data);
    }

    xhr.onreadystatechange = function () {
      let timer = null;
      let timeout = options.timeout?options.timeout:5000
      if(xhr.readyState == 4 && xhr.status == 200){
        let res = JSON.parse(xhr.responseText);
        clearTimeout(timer);
        resolve(res);
      }

     timer = setTimeout(()=>{
       clearTimeout(timer);
          reject(xhr.status);
        },timeout)

    }
  })
  return promise;
}

promise 封装 axios的更多相关文章

  1. 【转】Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...

  2. Vue笔记:封装 axios 为插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  3. 封装axios方法之一

    一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...

  4. vue 封装axios以及使用中间代理 proxy

    为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件   用来存放接口地 ...

  5. 15、vue项目封装axios并访问接口

    1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...

  6. Vue中封装axios

    参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios ...

  7. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  8. 创建Vue项目及封装axios

    1. 始vue化项目 https://www.cnblogs.com/xiaonq/p/11027880.html vue init webpack deaxios # 使用脚手架创建项目 deaxi ...

  9. 封装axios在util中

    创建util工具类,封装通用的get和post请求 封装axios成工具类,方便大家请求调用 1.创建util文件夹 2.创建request.js 3.封装 //封装请求相关方法 //初始化一个axi ...

随机推荐

  1. 长沙理工大学第十二届ACM大赛-重现赛C 安卓图案解锁 (模拟)

    链接:https://ac.nowcoder.com/acm/contest/1/C来源:牛客网 安卓图案解锁 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言 ...

  2. django搭建一个小型的服务器运维网站-查看服务器中的日志与前端的datatable的利用

    目录 项目介绍和源码: 拿来即用的bootstrap模板: 服务器SSH服务配置与python中paramiko的使用: 用户登陆与session; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...

  3. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  4. Django【第16篇】:Django之Form组件自定义验证规则

    自定义验证规则以及中间件简单介绍 1.python2和python3中的区别 对于python2内置的字符串类型有str和unicode 比如:"abc"是字符串,u"你 ...

  5. Github使用进阶

    1 Github常用词: watch:会持续收到该项目的动态 fork:复制某个项目到自己的Github仓库中 star:可以理解为点赞 clone:将项目下载至本地 follow:关注你感兴趣的作者 ...

  6. rocketmq运维管理

    # 运维管理--- ### 1 集群搭建 #### 1.1 单Master模式 这种方式风险较大,一旦Broker重启或者宕机时,会导致整个服务不可用.不建议线上环境使用,可以用于本地测试. #### ...

  7. get和post请求方式的区别,常见状态码的整理

    get和post的区别 get和post是什么? HTTP协议中的两种发送请求的方法.get从指定的资源请求数据: post向指定的资源提交要被处理的数据. HTTP是什么? 超文本传输协议(HTTP ...

  8. facebook第三方登陆实践

    未完,待续... 1.注册 到Facebook官网注册开发者账号,创建应用(开发者平台 https://developers.facebook.com),如果尚未注册账号的请注册账号并进行登录) 注册 ...

  9. CF1051F The Shortest Statement Dijkstra + 性质分析

    动态询问连通图任意两点间最短路,单次询问. 显然,肯定有一些巧妙地性质(不然你就发明了新的最短路算法了233)有一点很奇怪:边数最多只比点数多 $20$ 个,那么就可以将这个图看作是一个生成树,上面连 ...

  10. 倍增O(1)求区间&值与|值

    ;i<=n;++i) f[i][]=a[i],g[i][]=a[i]; ;(<<j)<=n;++j) ;(i+(<<j)-)<=n;i++) { f[i][j ...