/*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. keras数据增强

    1.keras数据增强:https://www.cnblogs.com/hutao722/p/10075150.html 2 .keras fit 中的 verbose verbose:日志显示ver ...

  2. 小程序makePhoneCall拨打电话问题

    调用wx.makePhoneCall后肯定会弹出一个询问框,此时无论是点击确认或者取消,页面都会依次触发app.js中的onHide函数和onShow函数,所以需要注意

  3. python数组中在某一元素前插入数据

    # 已知有一个已经排好序的数组.要求是,有一个新数据项,要求按原来的规律将它插入数组中. a=[1,2,3,4,5,6,7,8,9]num=int(input("input num:&quo ...

  4. Vue-搭建环境

    项目开发完react-native,因为又对vue开始感兴趣了,又开始自学起了vue,关于vue是一个很简便的前端框架,要学习它,当然是要先学会搭建vue的环境, 不会搭建环境的程序员不是一个好的程序 ...

  5. python装饰器的简单理解

    如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 装饰器的使用方法很固定: 先定义一个装饰函数(帽子)(也可以用类.偏函数实现) 再定义你 ...

  6. NOIP2017 D2T2 宝藏

    洛谷P3959 其实就是一道暴力搜索题……只是需要一个状态压缩的剪枝比较难想而已 这根本不叫dfs!只是一个递归而已……开始就被dfs坑了 思路: 首先一个基本的预处理 数据范围n≤12,m≤5000 ...

  7. linux C++ 通讯架构(一)nginx安装、目录、进程模型

    nginx是C语言开发的,号称并发处理百万级别的TCP连接,稳定,热部署(运行时升级),高度模块化设计,可以用C++开发. 一.安装和目录 1.1 前提 epoll,linux内核版本为2.6或以上 ...

  8. A1011

    找最大的,然后按规定计算后输出. 没啥可说的,除非犯了愚蠢的错误(比如把j写成i这种),按题目要求写就是了. #include<cstdio> int main(){ ]={'W','T' ...

  9. php array_unshift()函数 语法

    php array_unshift()函数 语法 作用:用于向数组插入新元素.新数组的值将被插入到数组的开头.富瑞华 语法:array_unshift(array,value1,value2,valu ...

  10. Finer Resolution Observation and Monitoring -Global Land Cover更精细的分辨率观测和监测-全球土地覆盖

    http://data.ess.tsinghua.edu.cn/ 全球土地覆盖数据是了解人类活动与全球变化之间复杂互动的关键信息来源.FROM-GLC(全球土地覆盖的精细分辨率观测和监测)是首个使用陆 ...