浏览器发请求的几种方式

Ajax请求

传统的请求方式，不可异步请求。

1
2
3
4
let xhr = new XMLHttpRequest();
xhr.open(url);
xhr.send();
xhr.onload = function(){}

fetch请求

这是浏览器新增的且是浏览器内置的请求方式，默认为异步的promise请求。

1
fetch([url,options]).then(res = > {});

axios请求

别人封装的基于promise的异步请求。

一般会封装为http.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// http.js文件
import axios from 'axios';
import qs from 'qs'; //请求格式的转换第三方库

// webpack中可配置在什么模式下对应的地址，生产模式有两种，默认为生产环境
/* 
	根据环境变量区分接口的默认地址
*/
switch(process.env.NODE_ENV){
	case "production":
		axios.default.baseURL = "上线地址";     //在路径前面统一加上该基本地址
		break;
	case "test":
		axios.default.baseURL = "公司给的测试地址";
		break;
	defalut:
		axios.default.baseURL = "localhost:8080";
}
/* 
	设置超时时间和跨域是否允许携带凭证，如果不能携带，则你的登录校验走不了session，cookie路径
*/
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
/*  
	设置请求传递的数据格式,有后端决定，因为get请求是这种数据格式（xxx=xxx&&sss=sss），所以数据格式类型设置为x-www-form-urlencoded
*/
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
/*
	以下这种请求格式的转换一般适用于post请求
*/
axios.defaults.transformRequest = data => {
    qs.stringify(data);  //将数据格式转为aaa=xxx的格式
};

/*
	设置请求拦截器
	客户端发送请求->[请求拦截器]->服务器
	TOKEN校验【JWT】，接收服务器返回的TOKEN，存储到vuex/本地存储中，每次向服务器发起请求，我们都需要吧token带上
*/
axios.interceptors.request.use(config=> {
    // 获取本地的token，有者带上本地token发给后端
    let token = localStorage.getItem('token');
    token && (config.headers.Aythorization = token);
    //必须返回配置项，否则根本更改不了发给后端的头权限
    return config;
},err => {
    return Promise.reject(err);
});
/*
	响应拦截器
	服务器返回信息 -> 【拦截的统一处理】 -> 客户端js获取到信息
*/
axios.defaults.validateStatus = status => {
    //自定义响应成功的HTTP状态码
    return /^(2|3)\d{2}$/.test(status);
};
axios.interceptors.response.use( res => {},err ==> {})

TOKEN校验【JWT】

当我们第一次向服务器发起请求时，服务器会通过某种算法生成用于权限验证的TOKEN并发给客户端，随后服务器要求客户端每次向服务器发起请求时都需要将TOKEN带上，服务器收到客户端的TOKEN后，会比较是否符合之前服务器生成TOKEN时的规则，符合则将请求结果返回给客户端，不符告诉客户端这是非法访问并拒绝客户端的请求。同时TOKEN有日期限制，过期者需要重新发起请求。

API的分类

  1. REST API: restful
    • 发送请求进行CRUD哪个操作由请求方式来决定。
    • 同一个请求路径可以进行多个操作。
    • 请求方式会用到GET/POST/PUT/DELETE。
  2. 非REST API: restless
    • 请求方式不决定请求的CRUD操作。
    • 一个请求路径只对应2一个操作。
    • 一般只有GET/POST请求。

json-server创建接口

1
cnpm i -g json-server

在根目录下创建db.json文件。

1
2
3
4
5
6
7
8
9
{
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" }
  }

json-server --watch db.json即可启动并更改时自动刷新。

封装axios函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="testGet()">get请求</button>
    <!-- <button onclick="testPost()">post请求</button>
    <button onclick="testPut()">put请求</button>
    <button onclick="testDelete()">delete请求</button> -->
    <script>
        function testGet(){
            axios({
                url: 'http://localhost:3000/posts',
                method: 'POST',
                data: {
                    "title": "json-server----",
                    "author": "typicode----"
                }
            }).then(
                response => {
                    console.log(response);
                },
                error => {
                    console.log(error.message);
                }
            )
        }
        function axios({
            url,
            method="GET",
            params={},
            data={}
        }){
            // 返回一个promise对象
            return new Promise((resolve,reject) => {

                //处理query参数（拼接到url） id=1&xxx=abc
                let queryString = '';
                Object.keys(params).forEach(key => {
                    queryString += `${key}=${params[key]}&`;
                })
                if(queryString){
                    // 如果queryString有值，去除最后的&
                    queryString = queryString.substring(0,queryString.length);
                    // 拼接到url
                    url += '?' + queryString;
                }

                // 绑定状态改变的监听，放在请求send前面比较容易理解，放在后面也可以，因为请求是异步请求的，send之后立即执行onreadystatechange同步函数
                request.onreadystatechange = function(){
                    //如果请求没有完成，直接结束
                    if(request.readyState != 4){
                        return
                    }
                    //如果响应状态码在[200,299]之间代表成功,否则失败
                    const {status,statusText} = request
                    // 如果请求成功了调用resolve()
                    if(status >= 200 && status <= 299){
                        const response = {
                            data: JSON.parse(request.response),
                            status,
                            statusText
                        }
                        resolve(response)
                    }else{
                        reject(new Error('request error status is' + status));
                    }
                }

                // 异步执行ajax请求
                const request = new XMLHttpRequest();
                request.open(method,url,true);
                if(method == "GET"){
                    request.send();
                }else if(method == "POST"){
                    // 设置请求头
                    request.setRequestHeader('Content-Type','application/json;charset=utf-8')
                    request.send(JSON.stringify(data));   //发送json格式请求参数

                }
            })
        }
    </script>
</body>
</html>

本文标题:浏览器发请求的几种方式

文章作者:陈楚吟

发布时间:2020-07-09, 20:20:16

最后更新:2020-07-11, 21:37:01

原始链接:http://yoursite.com/2020/07/09/浏览器发请求的几种方式/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. Ajax请求
  2. 2. fetch请求
  3. 3. axios请求
    1. 3.0.1. API的分类
    2. 3.0.2. json-server创建接口
|