html5中的httpClient

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// xhr level2
var xhr = new XMLHttpRequest();
xhr.open("GET/POST/DELETE/...", "/url", "async: true | false");
xhr.send();

// 超时时间，0表示永不超时
xhr.timeout = 0;
// 接受数据类型
xhr.responseType = "arrayBuffer | blob | json...";
// 设置请求头
xhr.setRequestHeader("", "");
// 请求成功
xhr.onload = e => {
  console.log("request success");
};
// 请求结束
xhr.onloadend = e => {
  console.log("request loadend");
};
// 请求出错
xhr.onerror = e => {
  console.log("request error");
};
// 请求超时
xhr.ontimeout = e => {
  console.log("request timeout");
};
// 监听进度
xhr.addEventListener(
  "progress",
  function(evt) {
    if (evt.lengthComputable) {
      var percentComplete = evt.loaded / evt.total;
    }
  },
  false
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- post method requeset by xhr -->
<!-- application/x-www-form-urlencoded -->
<form id='test-form'>
  Input1: <input name='input1'><br>
  Input2: <input name='input2'><br>
  <input type='submit'>
</form>
<script>
  var testForm = document.getElementById('test-form');
  testForm.onsubmit = function(event) {
    event.preventDefault();

    var request = new XMLHttpRequest();
    // POST to httpbin which returns the POST data as JSON
    request.open('POST', 'URL', /* async = */ false);

    var formData = new FormData(document.getElementById('test-form'));
    request.send(formData);

    console.log(request.response);
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/*
* default contentType : application/x-www-form-urlencoded;charset=utf-8
* submit data by json format
*/
$.ajax({
  url:url,
  type:"POST",
  contentType: "application/json; charset=utf-8"
  data:{a:"1"},
  success: function(){
    ...
  }
})

/*
* formData 上传文件
* submit data by multipart/form-data
*/
var fd = new FormData();
fd.append('file', input.files[0]);
$.ajax({
  url:url,
  type:"POST",
  data: fd,
  processData: false,
  contentType: false,
  success: function(){
    ...
  }
})

/*
* 跨域带cookie
*/
$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import axios from "axios";
import qs from "qs"; // 序列化和反序列化参数

// 创建实例级别的请求
const instance = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 0,
  withCredentials: true // 跨域带cookie
});

instance.interceptors.request.use(
  conf => {
    return Object.assign(conf, {
      headers: {
        aaa: "111"
      }
    });
  },
  err => Promise.reject(err)
);

instance.interceptors.response.use(
  res => {
    if (res.data.code === 200) {
      return Promise.resolve(res.data);
    } else {
      return Promise.reject(res);
    }
  },
  err => Promise.reject(err)
);

// application/json
instance.post("url", { a: "111" });

// application/x-www-form-urlencoded
instance.post("url", qs.stringify({ a: "111" }));

// multipart/form-data
var fd = new FormData();
fd.append("file", input.files[0]);
instance.post("url", fd);

// get请求 url参数拼接
instance.get("url", { params: { a: "111" } });

1
2
3
4
5

fetch("url")
  .then(response => response.json())
  .then(function(res) {
    console.log(res);
  });