React复习（6）：服务器相关（项目前篇）

---

一、跨域、同源问题

首先是同源问题，浏览器同源问题：指的是域名、协议、端口相同。
因为存在同源限制，所以产生了跨域问题，具体详细介绍：浏览器同源策略及跨域问题
里面讲的非常详细，虽然有些我还看不懂，但还是推一波大佬博文。
本项目服务器端口号：4000，而react项目的端口号默认3000，显然因为端口号不同，产生了跨域问题。
跨域的解决方法有很多，这里主要使用代理服务器proxy方式，在react项目的package.json中定义如下：

"proxy":"http://localhost:4000/"

二、Promise介绍

new Promise((resolve,reject)=>{
    //异步请求
    //成功
    resolve(1)
    //失败
    reject(2)
}).then((e)=>{
  console.log(e)//1

}).catch((q)=>{
   console.log(q)//2
})

Promise方法传递一个函数作为参数，用来表示异步操作的两种结果：成功resolve，失败reject，两种结果又分别对应下面的then和catch。上面是基本的框架。
具体使用及介绍请看:Promise

这里使用也是为了表示服务器发起请求是否成功。
例如下面例子（使用promise对ajax请求进行封装）：

function promiseAjax(methods,url) {
    return new Promise((resolve,reject)=>{
        var xml=new XMLHttpRequest();
        xml.open(methods,url,true)
        xml.send()
        xml.onreadystatechange=function(){
            if(xml.state==200&&xml.readyState==4){
               //成功
               resolve(xml.response)
            }
            else{
                //
                reject("发起请求失败")
            }
        }
    })
}

promiseAjax('GET',"http://baidu.com").then((e)=>{
   console.log(e)
}).catch((err)=>{
   console.log(err)
})

将请求定义成函数形式，这样最后会返回一个promise，promise自带两种情况resolve和reject，可以分别传递参数，调用函数访问的时候就可以直接走then或者catch即可。

三、axios请求

前面介绍了promise，这里我们使用基于promise的HTTP库axios向后台发起请求。在组件渲染完成之后即componentDidMount生命周期下，使用axios发起请求，

使用yarn start开启react项目，控制台输出data如下：（表示请求成功）

不难发现结果data中的内容比较乱，这里是因为我们访问的是’/'接口，而"/“接口本身返回的就是一个html文件，就像上面data后面的内容。为了解决这一问题，我们将”/“接口换成”/s"（自定义）接口，具体如下：
服务器index.js文件：

const express =require('express')
const app=express();
app.get('/s',(req,res)=>{
    res.send("服务器发送的数据")
})
app.listen(4000)

react项目中的请求代码：

import React,{Component} from 'react'
import axios from 'axios'

class App extends Component{
  constructor(props){
    super(props)
  }
  //通过axios发起
  componentDidMount(){
     axios.get('/s').then((data)=>{
        console.log(data)
     }).catch((err)=>{
        console.log(err)
     })
  }
  render(){
    return(
      <div>
      </div>
    )
  }
}
export default App;

然后因为修改了服务器文件，记得重新node一下。
这时的输出：

这时候我们就可以直接获取data.data即为我们从服务器端请求来的数据：

到此，一个由react项目发起的请求完成，但在我们学过了react-redux之后，我们一般选择在redux中写逻辑和存储状态，而react主要写视图部分，所以接下来的项目我们选择在redux中发起请求。
React复习（7）：服务器相关（项目后篇）