js网络请求汇总

1.原生XHR

var xhr = new XMLHttpRequest()
//xhr.responseType = 'json'可以将返回json字符串结果自动转换成对象
xhr.open(method,  uri,  true)
xhr.send('body')//请求主体（上传的参数）
xhr.onreadystatechange = function(){        
    if(xhr.readyState===4){     
        if(xhr.status>=200 && xhr.status<300){ //响应完成且成功        
            console.log(xhr.responseText);
        }else{  //响应完成但不成功
            alert('响应完成但失败！'+xhr.status);
        }       
    }       
}

2.JQuery--AJAX

//需引入JQuery <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
$.ajax({
    url: '/add/',  // 请求地址
    method: 'post',  // 请求方式
    data:{'a':$("#first").val() ,'b':$("#second").val() },  //  获取input标签数据
    success:function (data) {
        //成功触发
    },
    error:function (error) {
        //失败，触发
    }
})

好处：可以将对象数据自动序列化成对应的请求头对应形式的数据

3.原生fetch

• Fetch API是新的ajax解决方案Fetch会返回Promise
• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

语法：fetch(url, options).then()

fetch(url, {
    //body: JSON.stringify(data), // body(上传的数据)需要对应header中的'Content-Type',序列化成不同的字符串形式
    body:'key=value&key=value',
    headers: {
        //'content-type': 'application/json'
        'content-type':'application/x-www-form-urlencoded'
    },
    method: 'POST', // *GET默认get请求, POST, PUT, DELETE, etc.
})

4.axios

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
• 特点：
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应

1. 语法
   ①. 安装：npm install axios -S
   或者静态引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

   ②. 使用请求方式
   get方式

            // 为给定 ID 的 user 创建请求
                axios.get('/user?ID=12345')
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });

                // 可选地，上面的请求可以这样做
                axios.get('/user', {
                    params: {
                    ID: 12345
                    }
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });

        post方式 

            axios.post('/login',qs.stringify({
                user:'xxx',
                pwd:'密码'
            }))
            .then(res=>{
                console.log(res);
                console.log(res.data);
            })

③. 执行多个并发请求

       function getUserAccount() {
           return axios.get('/user/12345');
       }

       function getUserPermissions() {
           return axios.get('/user/12345/permissions');
       }

       axios.all([getUserAccount(), getUserPermissions()])
           .then(axios.spread(function (acct, perms) {
               // 两个请求现在都执行完成
       }));