即将讲到的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'));//以流的形式保存数据到本地
})