React进行服务器端数据请求---fetch

╰+哭是因爲堅強的太久メ 2021-09-15 15:30 315阅读 0赞

get请求

静态数据        不方便修改，而且只能通过本页面进行修改

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="UTF-8" />
5.  <title>Hello World </title>
6.  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  </script>
7.  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  </script>
8.  <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">  </script>
9.  **
10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js">  </script>
11. </head>
12. <body>
13. <div id="root"> </div>
14. </body>
15. </html>
16. <script type="text/babel"> 
17. class Fetch\_get extends React.Component\{
18. constructor(props)\{
19. super(props)
20. this.state = \{
21. arr:\[
22. \{ "id": "123001", "name": "xiaoming"\},
23. \{ "id": "123002", "name": "xiaobing"\},
24. \{ "id": "123003", "name": "xiaona"\}
25. \]
26. \}
27. \}
28. render()\{
29. return (
30. <div>
31. <ul>
32. \{
33. this.state.arr.map((ele,index,arr)=>\{
34. return <li key=\{index\}>\{ele.name\} </li>
35. \})
36. \}
37. </ul>
38. </div>
39. )
40. \}
41. \}
42. ReactDOM.render(
43. <Fetch\_get></Fetch\_get>,
44. document.getElementById( 'root')
45. );
46. </script>

请求json数据，完成页面渲染

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="UTF-8" />
5.  <title>Hello World </title>
6.  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  </script>
7.  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  </script>
8.  <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">  </script>
9.  **
10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js">  </script>
11. </head>
12. <body>
13. <div id="root"> </div>
14. </body>
15. </html>
16. <script type="text/babel"> 
17. class Fetch\_get extends React.Component\{
18. constructor(props)\{
19. super(props)
20. this.state = \{
21. arr:\[\]
22. \}
23. \}
24. render()\{
25. return (
26. <div>
27. <ul>
28. \{
29. this.state.arr.map((ele,index,arr)=>\{
30. return <li key=\{index\}>\{ele.name\} </li>
31. \})
32. \}
33. </ul>
34. </div>
35. )
36. \}
37. componentDidMount()\{
38. var url = "data.json"
39. var option = \{
40. methods: "get"
41. \}
42. fetch(url,option).then( (res)=>\{
43. return res.json()
44. \}).then( (res)=>\{
45. *// 请求到的数据*
46. console.log(res)
47. *// 修改state*
48. this.setState(\{
49. arr:res
50. \})
51. *// 打印输出* 
52. console.log( this.state.arr)
53. \})
54. \}
55. \}
56. ReactDOM.render(
57. <Fetch\_get></Fetch\_get>,
58. document.getElementById( 'root')
59. );
60. </script>

数据库

为了方便数据的操作，我们平时在页面上看到的数据一般都是在线数据，通过后台系统管理，能够很方便实现对数据的修改

在此，就不多做演示！！！

在线接口

书写数据接口，通过后台操作，读取数据库数据，并形成接口的形式，我们需要对数据进行操作的时候，直接操作接口即可

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="UTF-8" />
5.  <title>Hello World </title>
6.  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  </script>
7.  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  </script>
8.  <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">  </script>
9.  **
10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js">  </script>
11. </head>
12. <body>
13. <div id="root"> </div>
14. </body>
15. </html>
16. <script type="text/babel"> 
17. \[\{ "id": "123001", "name": "xiaoming"\},\{ "id": "123002", "name": "xiaobing"\},\{ "id": "123003", "name": "xiaona"\}\]
18. class Fetch\_get extends React.Component\{
19. constructor(props)\{
20. super(props)
21. this.state = \{
22. arr:\[\]
23. \}
24. \}
25. render()\{
26. return (
27. <div>
28. <ul>
29. \{
30. this.state.arr.map((ele,index,arr)=>\{
31. return <li key=\{index\}>\{ele.name\} </li>
32. \})
33. \}
34. </ul>
35. </div>
36. )
37. \}
38. componentDidMount()\{
39.              *//请求在线接口*
40. var url = "http://www.taoquan.store/robot/getUsers.php"
41. var option = \{
42. methods: "get"
43. \}
44. fetch(url,option).then( (res)=>\{
45. return res.json()
46. \}).then( (res)=>\{
47. *// 请求到的数据*
48. console.log(res.users)
49. *// 修改state*
50. this.setState(\{
51. arr:res.users
52. \})
53. *// 打印输出* 
54. console.log( this.state.arr)
55. \})
56. \}
57. \}
58. ReactDOM.render(
59. <Fetch\_get></Fetch\_get>,
60. document.getElementById( 'root')
61. );
62. </script>

post数据请求

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="UTF-8" />
5.  <title>Hello World </title>
6.  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  </script>
7.  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  </script>
8.  <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">  </script>
9.  **
10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js">  </script>
11. </head>
12. <body>
13. <div id="root"> </div>
14. </body>
15. </html>
16. <script type="text/babel"> 
17. class Com extends React.Component\{
18. constructor(props)\{
19. super(props)
20. this.state = \{
21. num: 1
22. \}
23. \}
24. render()\{
25. return (
26. <div>
27. <ul>
28. <li>1 </li>
29. </ul>
30. </div>
31. )
32. \}
33. componentDidMount()\{
34. var url = 'http://127.0.0.1:8899/api/insertData'
35. var options = \{
36. method: 'POST',
37. headers: \{
38. 'Content-Type': 'application/x-www-form-urlencoded',
39. \},
40. body: 'name=1&sex=2&email=3&phone=4&address=5'
41. \}
42. fetch(url,options)
43. .then( (res)=>\{
44. return res.json()
45. \})
46. .then( (res)=>\{
47. console.log(res)
48. \})
49. \}
50. \}
51. ReactDOM.render(
52. <Com></Com>,
53. document.getElementById( 'root')
54. );
55. </script>

核心代码，需注意

1.              var url = 'http://127.0.0.1:8899/api/insertData'
2.                  var options = \{
3.                      method: 'POST',
4.                      headers: \{
5.                          'Content-Type': 'application/x-www-form-urlencoded',
6.                      \},
7.                      body: 'name=1&sex=2&email=3&phone=4&address=5'
8.                  \}
9.  fetch(url,options)
10. .then((res)=>\{
11. return res.json()
12. \})
13. .then((res)=>\{
14. console.log(res)
15. \})

第二种方式

1.  componentDidMount()\{
2.  var data = \{
3.  name:"1",
4.  sex:"2",
5.  email:"3",
6.  phone:"4",
7.  address:"5"
8.  \}
9.  fetch('http://127.0.0.1:8899/api/insertData',\{
10. method: 'POST',
11. body: \`data=$\{JSON.stringify(data)\}\`,
12. headers: \{
13. 'Content-Type': 'application/x-www-form-urlencoded',
14. \}
15. \})
16. .then((res)=>\{
17. console.log(res.json())
18. \})
19. \}

Content-Type： 上传文件的时候，一定要设置为application/x-www-form-urlencoded

跨域

fetch跨域概述

在fetch跨域配置中有mode选项，提供了跨域的能力

*  mode: 'cors', // no-cors, cors, \*same-origin

*  mode:'cors'
    
     *  这个选项提供了跨域的能力, 但是服务端必须支持 cors ,也就是设置 res.header("Access-Control-Allow-Origin", "\*");
 *  mode:'no-cors'
    
     *  可以跨域进行数据请求 , 不需要设置跨域 header
     *  在该模式下 得到的返回数据中 type为opaque。, 能够在控制台看到返回的数据, 但是没有权限使用这些数据
 *  mode:"same-origin"
    
     *  同源, 不允许跨域

并不能成功跨域进行数据的请求

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="UTF-8" />
5.  <title>Hello World </title>
6.  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  </script>
7.  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  </script>
8.  <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">  </script>
9.  **
10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js">  </script>
11. </head>
12. <body>
13. <div id="root"> </div>
14. </body>
15. </html>
16. <script type="text/babel"> 
17. class Fetch\_get extends React.Component\{
18. constructor(props)\{
19. super(props)
20. this.state = \{
21. arr:\[\]
22. \}
23. \}
24. render()\{
25. return (
26. <div>
27. <ul>
28. \{
29. this.state.arr.map((ele,index,arr)=>\{
30. return <li key=\{index\}>\{ele.name\} </li>
31. \})
32. \}
33. </ul>
34. </div>
35. )
36. \}
37. componentDidMount()\{
38. var url = "https://api.douban.com/v2/movie/top250"
39. *// var url = 'http://127.0.0.1:8899/api/selectData'*
40. var option = \{
41. methods: "get",
42. mode: 'no-cors'
43. \}
44. fetch(url,option).then( (res)=>\{
45. console.log(res)
46. \})
47. \}
48. \}
49. ReactDOM.render(
50. <Fetch\_get></Fetch\_get>,
51. document.getElementById( 'root')
52. );
53. </script>

使用jsonp调取数据

在原生js中，我们可以利用script标签的支持跨域的特性进行

第一种方式---利用script标签的跨域访问特性

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.  <meta charset="UTF-8">
5.  <title>JSONP实现跨域2 </title>
6.  </head>
7.  <body>
8.  </body>
9.  </html>
10. **
11. <script type="text/javascript"> 
12. function fn(response)\{
13. console.log(response);
14. \}
15. </script>
16. <script src="https://api.douban.com/v2/movie/top250?callback=fn">  </script>

第二种方式---动态创建script

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.  <meta charset="UTF-8">
5.  <title>JSONP实现跨域2 </title>
6.  </head>
7.  <body>
8.  </body>
9.  </html>
10. **
11. <script type="text/javascript"> 
12. function fn(response)\{
13. console.log(response);
14. \}
15. var script = document.createElement( 'script')
16. script.src = 'https://api.douban.com/v2/movie/top250?callback=fn'
17. document.body.insertBefore(script, document.body.firstChild);
18. </script>

第三种方式---使用jquery

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="UTF-8">
5.  <title> </title>
6.  </head>
7.  <body>
8.  </body>
9.  </html>
10. <script src="https://code.jquery.com/jquery.js">  </script>
11. <script type="text/javascript"> 
12. $.ajax(\{
13. type: 'get',
14. url: "https://api.douban.com/v2/movie/top250?callback=?",
15. success(res)\{
16. console.log(res)
17. \},
18. dataType: "jsonp"
19. \})
20. </script>
21.