一、XMLHttpRequest
解释:其是相对原生的异步请求库,属于官方封装,属 js 原生,核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话,容易产生回调地狱。(浏览器支持好,对Promise使用不好)
1.基础使用
使用步骤:
- new XMLHttpRequest 创建 xhr 对象
- xhr.open 初始化请求参数
- xhr.send 发送网络请求
- xhr.onload 监听请求结果
- xhr.onerror 请求中断等错误发生时的处理
const xhr = new XMLHttpRequest();
xhr.timeout=10000;// 设置超时时间
xhr.open('GET','http://127.0.0.1:8000/api/db/getName/GtTJUiS05A17iStMXPCRqwlwiEiE',true)// 第三个参数表示是否为异步请求
xhr.send()
// 此时数据已经发送出去
// xhr.onload 用于处理响应完毕后的处理
xhr.onload = function () {
// xhr.status 为 HTTP 状态码
if (xhr.status == 200) {
//xhr.response 服务器端响应的内容
console.log(JSON.parse(xhr.response).username)
} else {
console.log(`${xhr.status}:${xhr.statusText}`)
}
}
2.POST
解释:下面解释如何发送json数据
const xhr = new XMLHttpRequest();
xhr.timeout=10000;// 设置超时时间
xhr.open('POST','http://127.0.0.1:8000/api/db/getName/GtTJUiS05A17',true)// 第三个参数表示是否为异步请求
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');// 表明发送的是json数据
data = {
name:'false',
bc:'15'
}
xhr.send(JSON.stringify(data))//将 JavaScript 值转换为 JSON 字符串
二、fetch
解释:Fetch是一种新的获取资源的接口方式,并不是对XMLHttpRequest的封装。属于官方封装,属 js 原生(浏览器支持好,对Promise使用好,小问题多(这里并不详细提及))
1.基础使用
// get请求
fetch(`http://127.0.0.1:8000/api/db/getName/GtTJUiS05A`)
.then(response => {
return response.json()// response.json()接收 JSON 类型数据 response.text()接收 TEXT 类型数据 response.blog()接收 Blog 二进制数据
})
.then(data=> {
console.log(data.username)
})
2.POST
解释:下面解释如何发送json数据
fetch('http://127.0.0.1:8000/api/db/getName/GtTJUiS05A',
{
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',// 表示提交的是json数据
},
body: JSON.stringify({ name: 'nihao' }),// 转为json格式
}).then((response)=>{
return response.json()// return了一个Promise对象
}).then((data)=>{
console.log(data.username)
})
三、axios
解释:axios是基于XMLHttpRequest的一种请求方式,相当于对其的封装,需要自行下载及引用(浏览器支持好,对Promise使用好,优点多)
- 提供了一些并发请求的接口
- 拦截请求和响应
- 转换请求和响应数据
- 自动转换JSON数据
安装:npm install axios
引用:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.基础
值得注意的参数:headers(根据后端需要填写),params(在下面相当于http://127.0.0.1:8000/api/db/getName/GtTJUiS05A1?ID=12345
),responseType(如果后端传回就是json
则可以不用修改其值)
注意:axios默认是传输json的,如果传输表单的(也就是字符串)需要给headers里面加上{ ‘content-type’: ’application/x-www-form-urlencoded’ }
axios({
method: 'get',
url: 'http://127.0.0.1:8000/api/db/getName/GtTJUiS05A1',
headers: {'X-Custom-Header': 'foobar'},
params: {
ID: 12345
},
// `responseType` 表示服务器响应的数据类型,可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
responseType: "json", // 默认的
}).then((result) => {
console.log(result.data.username)
})
2.POST
值得注意的参数:data(默认不设置content-type
就是json,设置表单的字符串就是字符串)
注意:axios默认是传输json的,如果传输表单的(也就是字符串)需要给headers里面加上{ ‘content-type’: ’application/x-www-form-urlencoded’ }
axios({
method: 'post',
url: 'http://127.0.0.1:8000/api/db/getName/GtTJUiS05A17iStMXPCRqwlwiEiE?name=15',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
// `responseType` 表示服务器响应的数据类型,可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
responseType: "json", // 默认的
}).then((result) => {
console.log(result.data.username)
})
3.配置全局内容
axios.defaults.baseURL = 'https://api.example.com'/; //这里已经后url的时候只写后缀就可以比如访问https://api.example.com/ak/123,url只写:ak/123即可
axios.defaults.timeout= 5000;//超过5秒没有处理完,终结操作,被catch捕获错误
4.拦截器
解释:分为请求拦截器,可以在请求添加点东西;响应拦截器,接受到响应后先进一步处理,再返回。
图解:
4.1 基础
请求拦截器(两个参数,第一个表示正常,第二个表示异常):
axios.interceptors.request.use(config => {
return config // 需要return才能进行下一步发向服务器
}, err => {
console.log(err);
})
响应拦截器(两个参数,第一个表示正常,第二个表示异常):
axios.interceptors.response.use(config => {
return config// 需要return才能返回
}, err => {
console.log(err);// 超时、404、500都会成返回到err
})
4.2 实例
4.2.1 Headers防爬虫
解释:网站有时候需要反爬虫,后端需要判断是否含有某个header,需要使用这个(写在请求拦截器)
axios.interceptors.request.use(config => {
config.headers.neadlook=15115// 所有ajax请求都会被设置上这个header
return config // 需要return才能进行下一步发向服务器
}, err => {
console.log(err);
})
4.2.2 Cookie防爬虫
解释:网站向后端发送请求时需要查看是否有cookie(后端同时也会检查是否有此cookie(如果没有就会启动反爬机制(让其跳转))),如果没有cookie就会先向某个网站去请求cookie,之后必须携带这个cookie去爬虫
axios.interceptors.request.use(config => {
// 获取分离Cookie
var cookie = document.cookie.split(';')
var object = {};
for (let i = 0; i < cookie.length; i++) {
var allCookieArrar = cookie[i].split('=');
object[allCookieArrar[0]] = allCookieArrar[1];
}
// 查看是否有指定Cookie(时间到会自动过期,时间很短)
let subject = object.hasOwnProperty('musthas')
// 处理Cookie名为mushhas不存在时需要对指定网址发请求获取cookie
if (!subject) {
const xhr = new XMLHttpRequest();
xhr.timeout = 10000;
xhr.open('GET', 'http://127.0.0.1:8000/api/cookie/', true)// 第三个参数表示是否为异步请求
xhr.send()
}
return config // 需要return才能进行下一步发向服务器
}, err => {
console.log(err);
})