React ajax

1.React本身只关注于界面, 并不包含发送ajax请求的代码

2.前端应用需要通过ajax请求与后台进行交互(json数据)

3.react应用中需要集成第三方ajax库(或自己封装)

1.常用的ajax库

1.jQuery: 比较重, 如果需要另外引入不建议使用

2.axios: 轻量级, 建议使用

1)封装XmlHttpRequest对象的ajax

2) promise风格

3)可以用在浏览器端和node服务器端

2. axios

先在项目中安装axios 在项目目录终端输入npm install axios

 

代码:

import React, { Component } from 'react'

// 引入axios

import axios from 'axios'

export default class App extends Component {

    // 创建函数发送axios请求获取数据

    getMess = ()=>{

        //请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个

        axios.get('请求地址').then(

            response=>{

                console.log('成功了',response.data)

            },

            error=>{

                console.log('失败了',error)

            }

        )

    }

    render() {

        return (

            <div>

                <button onClick={this.getMess}>点击获取数据</button>

            </div>

        )

    }

}

2.1解决axios跨域问题

配置代理

第一步 在src文件夹下创建一个名字为 setupProxy.js文件

注意修改完setupProxy.js文件要重启脚手架才能生效

文件内容

const proxy = require('http-proxy-middleware')

module.exports = function(app){

    app.use(

        proxy('/api1',{ //第一个参数配置前缀,遇见/api1前缀的请求，就会触发该代理配置

            target:'https://query.asilu.com/weather/baidu', //请求转发给谁

            changeOrigin:true,//控制服务器收到的请求头中Host的值

            pathRewrite:{'^/api1':''} //重写请求路径(必须)

        }),

        proxy('/api2',{在请求/api2的时候会替换成https://api.asilu.com/phone/

            target:'https://api.asilu.com/phone/',

            changeOrigin:true,

            pathRewrite:{'^/api2':''}

        }),

    )

}

App.js代码

import React, { Component } from 'react'

// 引入axios

import axios from 'axios'

export default class App extends Component {

    // 创建函数发送axios请求获取数据

    getMess = ()=>{

        //请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个

        axios.get('/api1?city=北京').then(

            response=>{

                console.log('成功了',response.data)

            },

            error=>{

                console.log('失败了',error)

            }

        )

    }

    getMess2 = ()=>{

        //请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个

        axios.get('/api2').then(

            response=>{

                console.log('成功了',response.data)

            },

            error=>{

                console.log('失败了',error)

            }

        )

    }

    render() {

        return (

            <div>

                <button onClick={this.getMess}>天气查询</button>

                <button onClick={this.getMess2}>手机归属地查询</button>

            </div>

        )

    }

}

效果: