我所熟知的那些js发送HTTP请求的方式

即将讲到的HTTP请求方式

方式	来源
XMLHttpRequest	原生js
$	jquery
http，https	node内置模块
request	第三方库
axios	第三方库

XMLHttpRequest

因为是原生的，所以优点是性能好，因为是原生的，所以缺点是忒简陋

基本使用

异步请求

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else{// 兼容 IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){//状态监听的回调
	if(xmlhttp.readyState==4 && xmlhttp.status==200){ //请求完成并且状态码为200
		console.log(xmlhttp.responseText);//拿到响应数据文本
	}
}

xmlhttp.open("GET","test1.asp",true);//设置请求参数（请求方式，url，异步）
xmlhttp.setRequestHeader("Content-type","text/html");//设置请求头
xmlhttp.send();//发送请求，如果是post请求，可以在send()括号中传数据

同步请求，这样的请求会阻塞线程

//删掉上面的回调
xmlhttp.open("GET","test1.asp",false);//异步改为false
xmlhttp.setRequestHeader("Content-type","text/html");
xmlhttp.send();
console.log(xmlhttp.responseText);//从这开始获取响应数据文本

当发送post请求

xmlhttp.open("POST","test1.asp",true);//改成post请求
xmlhttp.send(data)//在这传入要post的数据

两个接收响应的属性

xmlhttp.responseXML;//只有响应数据是xml才用
xmlhttp.responseText;//基本都用这个

jquery

jquery
不多说，前端一款操作dom非常方便的框架，只看他的$.ajax()部分

基本使用

$.ajax({
	url:"demo_test.txt",
	success:function(result){//成功的回调，参数是响应数据
		$("#div1").html(result);
	}
});

常用属性

$.ajax({
	async: true,//异步，默认true
	url:"demo_test.txt",
	type: 'GET',//请求类型，默认GET
	data: '',//发送post请求数据
	success:function(result){},//请求成功的回调
	error: function(xhr,status,error){},//请求失败的回调
});

http - https

http - https
这是两个node内置的模块，都可以用来进行HTTP请求，如果你请求的链接是https:// ，就使用https模块，反之亦然

基本使用

get请求

const https = require('https')

let hr = https.request({
		hostname: 'www.yuwjoo.com',//主机名
		path: 's?wd=666',//路径和数据都写这
		method: 'GET',//默认GET
		headers: {//设置header
			'Content-Type':'text/html',
		},
	},res=>{
		let d='';
		res.on('data',chunk=>{//拿到数据的回调
			d += chunk;//每次拿到的数据追加到d
		})
		res.on('end',()=>{//请求结束的回调
			console.log(d);
			app.end('88')
		})
	}
)

hr.on('error',err=>{//异常回调
	console.log(err)
})

hr.end()//结束https请求,对于https.request()是必须的

如果是post请求

let hr = https.request({
	...
	method: 'POST';//一定要先改成post
},...)

hr.write(data);//传入post请求需要的数据
hr.end();

两个不同的方法的写法

//必须手动调用end()结束请求
https.request(url, options, callback);
https.request(url, callback);
https.request(options, callback);

//options除了method固定是GET，其他和https.request()一样
//会自动调用end()结束请求
https.get(url: String|URL, options, callback);//参数变化同上

• url 和 options 可以同时存在，这时options就不用写那么麻烦了
• callback 函数传入的参数类型是 http.IncomingMessage

request

request 一个第三方的库，用起来会比http简单许多，同时可以很方便的以流的形式获取响应数据

基本使用

安装

cnpm install request --save

get请求

Request('https://www.iesdouyin.com', (error, response, body) => {//error:异常，response:响应结果，body:响应主体
	if (error) {
   		//异常处理
		console.log(error);
	} else {
		console.log(body);
	}
})

post请求

Request('https://www.iesdouyin.com',{
    method: "POST",//请求方式，默认为get
    body: JSON.stringify(requestData)//post参数字符串
}, (error, response, body) => {//error:异常，response:响应结果，body:响应主体
	if (error) {
   		//异常处理
		console.log(error);
	} else {
		console.log(body);
	}
})

Stream化响应数据

视频音频这些非文本数据可以以流的形式保存到本地

request('https://www.vvy.com/video/bd_logo1.mp4').pipe(fs.createWriteStream('a.mp4'))

以流的形式上传文件

fs.createReadStream('pic.mp4').pipe(request.put('http://vvy.com/upload'))

三种参数变化的写法

Request(url, options, callback);
Request(url, callback);
Request(options, callback);

options 对象常用属性

let options = {
	url: url,//请求路径
	method: "POST",//请求方式，默认为get
	headers: {//设置请求头
		"content-type": "application/json",
	},
	body: JSON.stringify(requestData)//post参数字符串
}

axios

axios也是第三方的一个库，经常在vue和node中使用

基本使用

安装

npm install axios --save

get请求

axios({
        url: 'https://aweme.snssdk.com',
        method: 'GET',
    }).then(res=>{//成功的回调
    	console.log(res.data);//res.data中的数据才是传过来的数据
    	
    }).catch(err=>{//捕捉异常
    	console.log(err);
    	
	})

post请求

axios({
        url: 'https://aweme.snssdk.com',
        method: 'POST',//改成post
        data: {//传递post数据
			firstName: 'Fred',
			lastName: 'Flintstone'
		}
    }).then(res=>{//成功的回调
    	console.log(res.data);//res.data中的数据才是传过来的数据
    	
    }).catch(err=>{//捕捉异常
    	console.log(err);
    	
	})

不同写法

axios(options)
axios(url)

axios.get(url, options)
axios.get('/user', {
    params: {//get参数
      ID: 12345
    }
})

axios.post(url, options)
axios.post('/user', {//post数据
    firstName: 'Fred',
    lastName: 'Flintstone'
})

options对象常用属性

let options = {
	method: 'post',
	url: '/user/12345',
	headers: {'X-Custom-Header': 'foobar'},
	data: {//post数据
		firstName: 'Fred',
		lastName: 'Flintstone'
	},
	params: {//get传递的参数
		ID: 12345
	},
	responseType:'stream',//响应的数据类型,默认json，可选：'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
	proxy: {//请求代理
		host: '127.0.0.1',
		port: 9000,
		auth: {
			username: 'mikeymike',
			password: 'rapunz3l'
		}
	}
}

同时发送n个请求并一起处理

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

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

axios.all([getUserAccount(), getUserPermissions()])//使用all()方法集合所有请求到一个数组
  .then(axios.spread(function (acct, perms) {//成功的回调
  
  }));

以流的方式获取数据

axios({
    url: 'https://aweme.snssdk.com',
    method: 'GET',
    responseType: 'stream'//响应数据为Stream类型
}).then(res=>{
	res.data.pipe(fs.createWriteStream('./66.mp4'));//以流的形式保存数据到本地
})