<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>XHR</title>

  </head>

  <body>

    <div>

      <button onclick="testGet()">GET请求</button>

      <button onclick="testPost()">POST请求</button>

      <button onclick="testPut()">PUT请求</button>

      <button onclick="testDelete()">DELETE请求</button>

    </div>

    <script>

      function testGet() {

        axios({

          url: "http://localhost:3000/posts",

          params: {

            id: 1

          }

        }).then(

          response => {

            console.log(response);

          },

          error => {

            console.log(error.message);

          }

        );

      }

      function testPost() {

        axios({

          url: "http://localhost:3000/posts",

          method: "POST",

          data: {

            title: "--POST添加上去的",

            author: "--POST添加---",

            id: 4

          }

        }).then(

          response => {

            console.log(response);

          },

          error => {

            console.log(error.message);

          }

        );

      }

      // axios 简单封装

      function axios({ url, method = "GET", params = {}, data = {} }) {

        // 返回一个promise对象

        return new Promise((resolve, reject) => {

          // 处理metho(转大写)

          method = method.toUpperCase()

          // 处理query参数(拼接到url上) id=1&aaa=ccc

          /*{

              id: 1,

              aaa: ccc

            }*/

          let queryString = "";

          Object.keys(params).forEach(key => {

            queryString += `${key}=${params[key]}&`;

          });

          // 判断queryString有没有值

          if (queryString) {

            // 去除最后的&

            queryString = queryString.substring(0, queryString.length - 1);

            // 接到url上

            url += "?" + queryString;

          }

          console.log(queryString);

          // 1.执行异步ajax请求

          // 创建xhr对象

          const request = new XMLHttpRequest();

          // 打开链接(初始化请求，没有请求)

          request.open(method, url, true);

          // 发送请求

          if (method === "GET") {

            request.send();

          } else if (method === "POST") {

            request.setRequestHeader(

              "Content-Type",

              "application/json;charset=utf-8"

            ); // 告诉服务器请求体的格式是JSON格式

            request.send(JSON.stringify(data)); // 发送JSON格式的请求体参数

          }

          //绑定状态改变的监听

          request.onreadystatechange = function() {

            // 如果请求没有完成，直接结束

            if (request.readyState !== 4) {

              return;

            }

            // 如果响应状态码在[200,300)之间表示请求成功，否则失败

            const { status, statusText } = request;

            if (status >= 200 && status < 300) {

              // 准备结果数据对象response

              const response = {

                data: JSON.parse(request.response),

                status,

                statusText

              };

              // 2.1如果请求成功了，调用resolve()

              resolve(response);

            } else {

              // 2.2如果请求失败，调用reject()

              reject(new Error("request error status is " + status));

            }

          };

        });

      }

    </script>

  </body>

</html>

用XHR简单封装一个axios的更多相关文章

  1. Swift - 简单封装一个工具类模板

    创建模板类(封装一个类) 例1:新建一个名字叫做 Product 的类 Product.swift File 的内容 class Product { var name: String var desc ...

  2. 利用jdbc简单封装一个小框架（类似DBUtils）

    利用jdbc写的一个类似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.Inpu ...

  3. 封装一个axios请求后台的通用方法

    import axios from 'axios'; import constant from '@/js/const'; import alert from '@/js/alertView'; le ...

  4. es6 简单封装一个 省市县三级下拉框

    废话不多说,直接上效果图和代码: 1,index.js function $(el){ return document.getElementById(el) } let render = Symbol ...

  5. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  6. swift开发之--简单封装Alamofire请求类以及简单使用SnapKit

    以前在swift3的时候,写过类似的,那个时候还没有很成熟的网络请求类库,在这里,还是衷心感谢大神们的付出! 具体效果如下,先上图: 点击按钮的时候,请求数据,数据结构如下: { ; reason = ...

  7. vue axios 简单封装以及思考

    先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️  https://github.com/axios/axios 下面是简单 ...

  8. 简单封装axios api

    可以在代码逻辑中写axios请求,处理请求结果,但是随着项目越来越大,代码会很繁琐,不容易维护,所以,可以把一些在所有请求中都要处理的逻辑抽取出来,封装成api方法.比如每次请求中都要判断是否有权限, ...

  9. axios简单封装

    写在最前面 新手前端刚刚接触vue,感觉真的好用.项目中需要使用axios,然后学习了一下.借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出. axios安装 ...

随机推荐

  1. Rancher 2.3实现K8S一键式升级！再也不用同步升级Rancher啦！

    在Rancher 2.3之前,Rancher的新版本总是随着Kubernetes的新版本一起发布,如果你想要使用最新版本的Kubernetes,那么你需要先升级Rancher才能使用.Rancher ...

  2. IDEA开发、测试、生产环境pom配置及使用

    pom文件 一般放在最下面,project里 <!--开发环境.测试环境.生产环境--> <!--生产环境--> <profiles> <profile> ...

  3. MySQL MHA /usr/share/perl5/vendor_perl/MHA/ServerManager.pm, ln301] install_driver(mysql) failed: Attempt to reload DBD/mysql.pm aborted

    在公司随便找3台测试机搭个MHA,下面这个问题折腾了三天,之前没遇到过,查了OS版本发现一致,可能是不同人弄的OS吧,知道是cpan的问题就是搞不定,郁闷...[root@test247 ~]# ma ...

  4. css 重点知识 和 bug 解决方法

    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...

  5. 修改Android源码实现原生应用双开，应用多开

    1. 准备 把某系统双开的两个app的信息进行对比 1.1 目录的对比 1.1.1 data目录对比 原应用: /data/user/0/com.luoyesiqiu.crackme/files 被复 ...

  6. Leetcode刷题笔记（Python 找出所有相加之和为n的k个组合，组合中只允许含有1-9的正整数，并且每种组合中不存在重复的数字。）

    eg:输入:k=3,n=9 输出: [[1,2,6],[1,3,5],[2,3,4]] 输入:k=2,n=5 输出:[[1,4][2,3]] #!/usr/bin/env python # -*- c ...

  7. Java8新特性之接口defualt,static方法

    简介 作用 Java8中接口引入了defualt,static两种方法提供默认实现,彻底打破了接口不能有默认实现的规定 static 让接口类似于工具类,提供一些静态方法 static方法不会被子类继 ...

  8. Java题库——Chapter15 事件驱动编程和动画

    Chapter 15 Event-Driven Programming and Animations Section 15.2 Events and Event Sources1.    A Java ...

  9. Django Forms ChoiceField 选项更新问题

    今天使用django的forms,发现单选后台新增数据后,前端表单选项不能刷新 class UserForm(forms.Form): name = forms.ChoiceField( choice ...

  10. django admin显示多对多字段ManyToManyField

    参考文档https://jingyan.baidu.com/article/4e5b3e190f55c591901e24b3.html admin.py from .models import *cl ...