使用fetch,fetch各位自行了解。
1.封装Fetch函数
首先在src目录下新建public文件夹。文件夹下新建utils.js文件,里面配置一些公共函数。
/** * 封装fetch请求 */ // 全局路径 const commonUrl = 'http://www.XX.com:8001' const parseJSON = function (response) { return response.json(); }; const checkStatus = function (response) { if (response.status >= 200 && response.status < 500){ return response; } const error = new Error(response.statusText) error.response = response throw error; }; // eslint-disable-next-line require-jsdoc export default function request (options = {}) { const {data, url} = options options = {...options} // 跨域 options.mode = 'cors' delete options.url if (data) { delete options.data options.body = JSON.stringify({ data }); } options.headers = { 'Content-Type': 'application/json' } return fetch(commonUrl + url, options, {credentials: 'include'}) .then(checkStatus) .then(parseJSON) .catch(err => ({err})); }
这里可以自行百度fetch封装,我只是为了配合上篇文章才这么写的。
2.去调用Fetch函数
(1)在components/login/submit-login-button.jsx文件下添加 myFunction函数,想写es6可以自行修改,
(注1)这里为了实例所以没用全局变量,想标准一些可以去 webpack.config.js文件添加如下代码,怎么用自行查询理解一下,总之就是全局变量的问题
devServer: { contentBase: path.resolve(__dirname, 'build'), host: '0.0.0.0', port: process.env.PORT || 8601, proxy: [{ context: ['/api/**', '**'], target: '你的API地址', changeOrigin: true, secure: false }] },
(注2)login/submit-login-button.jsx文件看上篇博文(如果更新了的话)
引入方法如下
import {parseJSON, checkStatus} from '../../public/utils.js';
这里用了三种fetch方法,我是随便用的,都是一个意思,第三种用的是自行封装的函数
const myFunction = function (){ // eslint-disable-next-line no-console console.log('登录!'); // ------ 方法一 ------- // const url = '/Login/(你的API接口url)'; // fetch(url,{ // method: 'post', // mode: 'cors', // headers: { // 'Content-Type': 'application/json' // }, // body: JSON.stringify({ // password: '1234567', // username: 'y3', // tel:'1322222233' // }) // }).then(response=>response.json()) // .then(data=>console.log(data)) // .catch(e=>console.log('error' + e)) // ------ 方法二 ------- const commonUrl = '你的API接口地址'; const options = {}; const url = commonUrl + '/Login/(你的API接口url)'; const data = { 'password': '1234567', 'username': 'yang', 'tel': '13848324733' } options.method = 'post' options.mode = 'cors' options.body = JSON.stringify(data) options.headers = { 'Content-Type': 'application/json' } return fetch(url,options,{credentials:'include'}) .then(checkStatus) .then(parseJSON) .then((res) => { // if (res.retCode === '0001'){ // localStorage.setItem('x-access-token',res.retBody.AccessToken) // return 'success'; // } else if (res.retCode === '0002'){ // return 'error'; // } else if (res.retCode === '0003'){ // return 'error'; // } else { // return; // } }) .catch(err=>({err})) // --------- 方法三 --------- // request({ // url: '(你的API接口具体的url)', // method: 'post', // mode: 'cors', // data: { // Header: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'}, // Body: JSON.stringify({ // password: '1234567', username: 'y3', tel: '13843322123' // }) // } // }) .then (function(response) { // return response.json() // }).then (function(json) { // console.log('parsed json', json) // }).catch(function(ex) { // console.log('parsing failed', ex) // }) }
使用的是post请求,配置跨域,body传递的数据全部转为json
options.method = 'post' options.mode = 'no-cors' options.body = JSON.stringify(data) options.headers = { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' }
(2)修改下方onClick,添加刚写的myFunction方法
SubmitLoginButton.defaultProps = { onClick: () => { myFunction(); } };
(3)去试试
点击登录,
![](https://img2020.cnblogs.com/i-beta/1928606/202003/1928606-20200312184940330-548101906.png)
![](https://img2020.cnblogs.com/i-beta/1928606/202003/1928606-20200312185002148-1803280883.png)
搞定!
可能遇到的问题:
跨域,下篇文章会介绍
已更新:https://www.cnblogs.com/mryaohu/p/12483757.html