/*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. python函数带不带括号的问题

    Python带括号返回的是该函数的返回值 不带括号返回的是该函数的位置信息等

  2. MyBatis源码浅析

    什么是MyBatis MyBatis是支持定制化SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集.MyBatis 使用简单的 ...

  3. 02CSS

    1.简介 从事网页制作或者相关工作,就要学习HTML,CSS.其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,主要用来修饰页面的元素 CSS 是 Cascading Style Shee ...

  4. HTML5 入门基础

    HTML5概述HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳.在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作,仍 ...

  5. 正确重写hashCode方法

    https://blog.csdn.net/HD243608836/article/details/87367763 到这里,对象写完了,开始描述问题. 计算hashCode的注意事项: 1.不能包含 ...

  6. java:在Conllection接口中实际上也规定了两个可以将集合变成对象数组的操作

    在Conllection接口中实际上也规定了两个可以将集合变成对象数组的操作 //在Conllection接口中实际上也规定了两个可以将集合变成对象数组的操作 List<String> a ...

  7. [洛谷P4107] HEOI2015 兔子与樱花

    问题描述 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...

  8. Shell入门02

    Shell入门-02 1.重定向 标准输入(<) 标准输出 标准错误重回定向 程序 = 指令 + 数据 命令   变量 在程序中,数据如何输入?又如何输出? 数据输入:键盘 – 标准输入,但是并 ...

  9. php array_keys()函数 语法

    php array_keys()函数 语法 作用:返回包含数组中所有键名的一个新数组.直线电机选型 语法:array_keys(array,value,strict) 参数: 参数 描述 array ...

  10. JSP文件的上传和下载

    文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...