axios在react中的写法

2019-03-12 21:30:15 fenglangwangyi 阅读数 383
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点

1、请求跨域问题

2、如何发起请求

3、axios的简单封装

全局安装create-react-app脚手架,帮助我们新建react项目

 

npm install -g create-react-app

然后创建react项目

create-react-app xxx项目名

然后安装依赖,并且运行react项目

安装 npm install

运行 npm start

首先我们解决跨域的问题

打开项目生成的package.json文件,修改文件内容如下

如果你赖一点可以这样写

完整写法

这样就可以解决跨域问题。

接下来开始讲一下如果在react中使用axios

首先安装axios

npm install axios --save-dev

方法一:

然后在我们的src目录下新建一个server.js的文件写下如下代码

然后我们就可以在react组件上使用我们的axios

随便写一个react组件,然后引进我们的刚刚封装的server.js,先写一个登录的函数,然后在组件渲染完之后执行该函数

打开浏览器查看返回结果

方法二:

我们可以先把所有的api都列出来,然后在用export导出去,如下

组件中使用

浏览器结果

看到上面的结果,说明我们已经成功决解跨域问题并且拿到了后台返回的数据。是不是很简单,赶紧自己动手试一试吧。

2020-01-18 13:53:12 Hei_lovely_cat 阅读数 170
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

1、打开项目生成的package.json文件,修改文件内容如下(在此位置添加如下代码):
在这里插入图片描述
2、建立api/http.js,代码如下:
在这里插入图片描述
3、建立api/serve.js,代码如下:在这里插入图片描述

4、引用(login.js)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述拿走不谢~

2018-09-13 22:15:19 ImagineCode 阅读数 3308
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

在React中发送Ajax请求-axios的使用

React本身不包含发送Ajax的代码,一般使用第三方的库。如axios,这是专门用于ajax请求的库。其封装了XmlHttpRequest对象的ajax,且使用promise风格写法,在浏览器的客户端与服务端都能使用。

你可能会想问为什么不用fetch()原生函数呢?因为考虑到对老版本浏览器的支持情况。
其次,fetch()不使用XmlHttpRequest对象发生ajax请求。

如果你想使用fetch()在低版本浏览器中,你可以考虑使用fetch.js的兼容库。

[axios CDN]

https://cdn.bootcss.com/axios/0.18.0/axios.js

//get方式

axios.get(url)
      .then(response=>{

      })
      .catch(error =>{
            console.log(error.message)
      })

//post方式

axios.post(url,{参数对象})
      .then(response=>{
        console.log(response)
      })
      .catch(error =>{
            console.log(error.message)
      })

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class MostStar extends React.Component {
            state = {
                repoName:'',
                repoUrl: ''
            }
            componentDidMount() {
                //方式1、使用axio发送异步ajax请求
                const url = 'https://api.github.com/search/repositories?q=tetris+language:assembly&sort=stars&order=desc'
                axios.get(url)
                    .then(response => {
                        const result = response.data;
                        const {name,html_url} = result.items[0];
                        this.setState({repoName:name,repoUrl:html_url});
                    })
                //方式2、使用fetch()发生请求
                fetch(url)
                    .then(response => {
                        return response.json()
                    })
                    .then(data=>{
                        //得到数据
                        const {name,html_url} = data.items[0];
                        this.setState({repoName:name,repoUrl:html_url});
                    })
            }
            render() {
                const {repoName,repoUrl} = this.state
                if(!repoName){
                    return (
                        <h2>Loading...</h2>
                    )
                }else {
                    return (
                        <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
                    )
                }
            }
        }
        ReactDOM.render(<MostStar/>,document.getElementById('test'))
    </script>
</body>
</html>

使用fetch发生请求

fetch使用文档

https://www.bootcdn.cn/fetch/readme/

https://segmentfault.com/a/1190000003810652

用法

fetch(url).then(function(response){
    return response.json()
}).then(function(data){
    console.log(data);//这才是返回的数据
}).catch(function(e){
    console.log(e);
})

练习:写一个搜索请求

  • 1、初始化react-app
  • 2、拆分组件
  • 3、编写静态组件
  • 4、编写动态组件

这里写图片描述
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './components/index.css';
import App from './components/app';


ReactDOM.render(<App />, document.getElementById('root'));

app.jsx

import React, { Component } from 'react'

import Search from './search'
import Main from './main'

class App extends Component {
    state = {
        searchName: ''
    }
    //更新状态
    setSearchName = (searchName) => this.setState({searchName})

    render () {
        return (
            <div className="container">
                <Search setSearchName={this.setSearchName}/>
                <Main searchName={this.state.searchName}/>
            </div>
        )
    }
}

export default App

search.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Search extends Component {
    static propTypes = {
        setSearchName: PropTypes.func.isRequired
    }
    handleSearch = () => {
       //得到输入的关键字
       const searchName = this.input.value.trim();
       if(searchName){
           //搜索
           this.props.setSearchName(searchName);
       }
    }
    render () {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input type="text" placeholder="enter the name you search" ref={input=>this.input=input}/>
                    <button onClick={this.handleSearch}>Search</button>
                </div>
            </section>
        )
    }
}

export default Search

main.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'


class Main extends Component {
    static propTypes = {
        searchName: PropTypes.string.isRequired
    }
    state = {
        initView: true,
        loading: false,
        users: null,
        errorMsg: null
    }
    //当组件接收到新的属性时进行回调
    componentWillReceiveProps(newProps) {//指定新的searchName,需要发请求
        const {searchName} = newProps;
        //更新状态
        this.setState({
            initView:false,
            loading:true
        })
        //发请求
        const url = `https://api.github.com/search/users?q=${searchName}`;
        axios.get(url)
            .then(response => {
                //得到数据
                const result = response.data;
                const users = result.items.map(item=> {
                    return {name:item.login,url:item.html_url,avatarUrl:item.avatar_url}//注意
                }) 
                //更新状态
                this.setState({                    
                    loading:false,
                    users
                })
            })
            .catch(error => {
                //更新状态
                this.setState({
                    loading:false,
                    errorMsg:error.message
                })
            })
    }
    render () {
        const {initView,loading,users,errorMsg} = this.state;
        const {searchName} = this.props;

        if(initView){
            return <h2>请输入关键词进行搜索:{searchName}</h2>
        }else if(loading){
            return <h2>正在请求</h2>
        }else if(errorMsg){
            return <h2>{errorMsg}</h2>
        }else {
            return (
                <div className="row">
                {
                    users.map((user,index)=>(
                        <div className="card" key={index}>
                            <a href={user.url} target="_blank">
                            <img src={user.avatarUrl} style={{width: 100}}/>
                            </a>
                            <p className="card-text">{user.name}</p>
                        </div>
                    ))
                }
                </div>
            )
        }
    }
}

export default Main

index.css

.album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
  }

  .card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
  }

  .card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
  }

  .card-text {
    font-size: 85%;
  }

2017-09-18 10:19:34 wangweiscsdn 阅读数 8869
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看


React 里调用axios

this.confirmPasswordModal = () => {
      const { passwordParams, passwordValidation,passwordChanging } = this.state;
      console.log('passwordParams',passwordParams);
      const { value:{oldPassword, newPassword} } = passwordParams;
      if (passwordValidation) {
        axios.put(USER_URL.changePassword, {oldPassword, newPassword})//请求发送数据
          .then(function (response) {//请求成功
            UserActions.changePasswordSuccess(response);
            var box=document.getElementById("layerteacher");
            box.style.display="block";
            setTimeout(function(){box.style.display='none'},2000);

          }.bind(this))
          .catch(function (error) {//请求失败!
            UserActions.changePasswordError(error);
            var hide=document.getElementById("layerHide");
            hide.style.display="block";
            setTimeout(function(){hide.style.display='none'},2000);
          }.bind(this));
      }
    }


2018-09-07 10:01:16 bbsyi 阅读数 2841
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

1.config.js配置数据请求路径和一些公共变量

// 定义常量及api接口地址
export const access_token = ''
export const platform = ''

let env = 'develop'
//开发环境、测试环境、生产环境
if(window.location.hostname == 'localhost'){
  env = 'develop'
}else if(window.location.hostname == ''){
  env = 'develop'
}else {
  env = 'product'
}

export const ENV = env

export const HOSTS = {
  develop: {
    api: 'http://www.baidu.com', // 测试环境
    domain: 'http://www.baidu.com',
  },
  product: {
    api: 'http://www.baidu.com',
    domain: 'http://www.baidu.com'
  }
}

export const ROOT = HOSTS[ENV].api

export const API = {
	memberInfo: ROOT + '/baidu.json'
}

2.api.js axios全局拦截处理及导出api

import axios from 'axios';

import { API,platform,access_token } from './config'

// 把默认配置withCredentials改为true,就可以允许跨域携带cookie信息了
axios.defaults.withCredentials = false
axios.defaults.timeout = 100000
// // axios拦截器
axios.interceptors.request.use(request => {

  if (request.params) {

    for (let key in request.params) {
      request.params[key] || (delete request.params[key])
    }
    request.params.access_token = access_token
    request.params.platform || (request.params.platform = platform)
  } else {
    
    request.params = {
      platform,
      access_token: access_token,
    }
  }
  return request
})

axios.interceptors.response.use(response => {
   // 在这里你可以判断后台返回数据携带的请求码
  if (response.data.status === 'success') {
    return response.data
  }else {
    // 非200请求抱错
    throw Error(response.data.message || '服务异常')
  }
})

//获取数据
export const fetchData = params => axios.get(API.memberInfo, {params});

3.page2.js 使用


import React, { Component } from 'react';
import {Router,Route,browserHistory} from 'react-router-dom';

import { fetchMember } from '../../api.js';

import { Button } from 'antd-mobile';

class Page1 extends Component {
	constructor(props) {
		super(props);
   	}


   	// 生命周期
	componentDidMount(){
		
	}


  	render() {
	    return (
	      <div className="page2">
	        这是page2
	        <Button type="primary" onClick={this.getData}>获取信息</Button>
	      </div>
	    );
	}


	getData(){
		fetchMember({'openId':"1"})
	  	    .then(res=>{
	  	    	if (res.status=="success") {
	  	    	  console.log(res.data)
	  		    }

	  	})
	}
}

export default Page1;

参考:https://blog.csdn.net/bbsyi/article/details/82388500