四、JavaScript 网络请求[XMLHttpRequest、fetch、axios]

一、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}`)
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 字符串
1
2
3
4
5
6
7
8
9

二、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)
            })
1
2
3
4
5
6
7
8

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)
        })
1
2
3
4
5
6
7
8
9
10
11
12

三、axios

解释：axios是基于XMLHttpRequest的一种请求方式，相当于对其的封装，需要自行下载及引用（浏览器支持好，对Promise使用好，优点多）

• 提供了一些并发请求的接口
• 拦截请求和响应
• 转换请求和响应数据
• 自动转换JSON数据

安装：npm install axios
引用：

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)
        })
1
2
3
4
5
6
7
8
9
10
11
12

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)
        })
1
2
3
4
5
6
7
8
9
10
11
12

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);
  })
1
2
3
4
5

响应拦截器（两个参数，第一个表示正常，第二个表示异常）：

  axios.interceptors.response.use(config => {
    return config// 需要return才能返回
  }, err => {
    console.log(err);// 超时、404、500都会成返回到err
  })
1
2
3
4
5

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);
        })
1
2
3
4
5
6

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);
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21