react项目 之 client请求框架

封装ajax

使用axios模块

• 下载模块

npm install -s axios

• 封装ajax方法

  • 在根目录下建api文件夹
  • 创建ajax.js

  //ajax.js
  import axios from 'axios'
  export default function ajax(url, data = {}, type = 'GET') {
    if(type==='GET'){
      return axios.get(url,{params:data})
    }else
      return axios.post(url,data)
  }
  

  • 创建index.js

  包含了所有接口请求的函数

  //index.js
  import ajax from './ajax'
  export const reqRegister = (user) =>ajax('/register',user,'POST')
  export const reqLogin = (user) =>ajax('/login',user,'POST')
  export const reqUpdateUser = (user) =>ajax('/update',user,'POST')
  

请求跨域问题（代理）

采用proxy代理解决：前端解决跨域

何为代理：

• 通过前端项目 生成一个代理区域
• 当要跨域时，会去访问代理区域，通过代理区域去访问跨域接口
• 代理区域接收返回数据，返回前端项目

对于前端来说 实际上并没有跨域 只是代理区域操作

//package.json 
"proxy": "http://localhost:4000"