【JavaScript】网络请求

原生 ajax

// POST
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send('{"name":"xxx","age":"xxx"}');
//XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
// xhr.onload 将在响应到达时调用
// xhr.onerror 将在网络出错时调用
1
2
3
4
5
6
7
8
9
10
11
12
13

 // GET
const xhr = new XMLHttpRequest();
// 地址后可以拼接 ?name=xxx&age=xxx 的参数
xhr.open('GET', 'http://localhost:3000');
xhr.send();
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
1
2
3
4
5
6
7
8
9
10

axios

// get 请求
// .then 的形式
axios.get('http://127.0.0.1:8080/api/getData', {
  // 可以携带参数
  params: {
    id: 1
  }
}).then(res => {
  console.log(res.data)
})
// async 的形式
async function getData() {
  const res = await axios.get('http://127.0.0.1:8080/api/getData')
  console.log(res.data)
}
getData()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// post 请求
axios.post('http://127.0.0.1:8080/api/postData',{
  id: 1,
}).then(res => {
  console.log(res.data)
})
1
2
3
4
5
6

// axios 其他配置
const ins = axios.create({
  baseURL: 'http://127.0.0.1:3000',
  timeout: 5000
})
// 请求拦截器
ins.interceptors.request.use(config => {
  console.log("发送了请求")
  return config
})
// 响应拦截器
ins.interceptors.response.use(res => {
  console.log("响应了")
  return res
})
const getData = () => {
  ins.get('/get').then(res => {
    console.log(res)
  })
}
const postData = () => {
  ins.post('/post', {
    name: 'zs',
    age: 18
  }).then(res => {
    console.log(res)
  })
}
getData()
postData()
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

fetch API

// fetch API 请求（默认get）
fetch('http://127.0.0.1:8080/api/getData')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
// post
fetch('http://127.0.0.1:8080/api/postData', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'xxx',
    age: 18
  })
})
  .then(response => {
    if (response.ok) {
      return response.json()
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error(error))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

常见请求头：

1、 GET 或 POST：请求类型，后接请求资源、协议和版本

2、 Host：主机和端口

3、 Connection：是否使用持续连接

4、 User-Agent：客户端浏览器的名称

5、 Accept：浏览器可接受的MIME类型

6、 Accept-Encoding：浏览器知道如何解码的数据编码类型

7、 Accept-Language：浏览器指定的语言

8、 Accept-Charset：浏览器支持的字符编码

9、 Cookie：保存的Cookie对象

10、Centent-type

1）、application/x-www-form-urlencoded

在使用表单提交时，请求方式是post时，form标签的属性entry=”application/x-www-form-urlencoded“（这也是默认值），请求头中的content-type的值就是 application/x-www-form-urlencoded。同时，浏览器会自动把处于form标签里的表单元素的内容组织成键值对的方式（key1=val1&key2=val2）。键和值都进行了URL的转码。并放到请求实体里面。（注意如果是中文或特殊字符如"/“、”,“、“:” 等会自动进行URL转码）。代码示例如下：

  

        用户名：

        密  码：

        重复密码：

        
    
   
1
2
3
4
5
6

如果使用ajax发送post请求，需要用 setRequestHeader();设置content-type。代码如下：
XMLHttpRequest对象.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2）、multipart/form-data
这个一般使用在文件上传时。表单提交方式，请求方式是post，form标签的属性 entry=“multipart/form-data”,请求头中的content-type的值是： multipart/form-data; boundary=----WebKitFormBoundarybi5XUwMxC7yc9s5a。既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息。
示例代码：

   

        
        
    
1
2
3
4

3）、application/json
这种格式（json格式）是目前在前后端分离开发场景中使用最多的的。前后端的数据交互使用json格式进行，可阅读性好，简介，方便。
这种格式一般用在发送ajax请求时，要么明确设置了 content-type 是application/json。要么，有的第三方库默认是application/json。如下示例代码：
XMLHttpRequest对象.setRequestHeader("Content-type","application/json");
4）、text/xml
这种格式（XML格式）是比较早的格式。现在用的比较少了，因为XML格式的数据被json的数据大，复杂。所以，基本上被淘汰了。

常见响应头：

1、 Allow：服务器支持哪些请求方法（如GET、POST等）

2、 Content-Encoding：文档的编码（Encode）类型。只有在解码之后才可以得到Content-Type头指定的内容类型

3、 Content-Length：内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据

4、 Content-Type：表示后面的文档属于什么MIME类型

1）、text/html ： HTML格式
2）、text/plain ：纯文本格式
3）、application/json：json格式
4）、text/xml ： XML格式
5）、image/gif ：gif图片格式
6）、image/jpeg ：jpg图片格式
7）、image/png：png图片格式
8）、application/pdf：pdf格式
9）、application/msword ： Word文档格式
10）、application/octet-stream ： 二进制流数据（如常见的文件下载）

5、 Date：当前的时间

6、 Expires：文档过期时间

7、 Refresh：表示浏览器应该在多少时间之后刷新文档，以秒计

8、 Server：服务器名称

9、 Set-Cookie：设置与页面关联的Cookie

10、 WWW-Authenticate：客户应该在Authorization头中提供的授权信息类型

---

实例：

    // ajax get 请求
    // const xhr = new XMLHttpRequest()
    // xhr.open('GET', 'https://api.uomg.com/api/rand.qinghua') // 如果想要携带参数可以 在后面拼接 ?a=xxx&b=xxx 的格式
    // xhr.send()
    // xhr.onreadystatechange = function(){
    //     if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    //         console.log(JSON.parse(xhr.response))
    //     }
    // }

    // ajax post 请求
    // const xhr = new XMLHttpRequest()
    // xhr.open('GET', 'http://example.com/api/xxx')
    /*
    * 设置请求头来传递 post 的参数格式：
    * application/x-www-form-urlencoded  用来传递 ?a=xxx&b=xxx 的格式
    * 还有很多 Content-Type 类型传递其他不同的参数格式。。。
    * */
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // xhr.send('a=xxx&b=xxx')
    // xhr.onreadystatechange = function(){
    //     if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    //         console.log(JSON.parse(xhr.response))
    //     }
    // }

    // fetch get 请求（默认）
    // fetch('https://api.uomg.com/api/rand.qinghua')
    //     .then(res => {
    //         return res.json()
    //     }).then(data => {
    //         console.log(data.content)
    //     })

    // fetch post 请求（默认）
    fetch('https://api.uomg.com/api/comments.163', {
        method: 'POST',
        // headers: {
        //     'Content-Type': 'application/json'
        // },
        body: {
            format: 'text'
        }
    })
        .then(res => {
            return res.json()
        }).then(data => {
        console.log(data.data.content)
    })
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