axios react 中

2019-05-15 11:31:25 ilkcyc 阅读数 1414

前后端通信

前后端通信通常使用 AJAX 方案,对于 AJAX 社区有非常多的封装,目前主流推荐 axios

使用 axios 进行通信

安装依赖:npm install axios --save

通常情况下,AJAX 请求都是异步的,因此 axios 默认返回一个 Promise,因此你可以通过 Promise 或者 async/await 的方式调用:

import axios from 'axios';

// async/await 方式使用
async function getUser() {
  try {
    const response = await axios.get('/user', {
      params: {
        ID: 12345
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

// Promise 方式调用
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle network error
    console.log(error);
  })

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  // request query
  params: {
    foo: 'bar'
  },
  // request body
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 在 React 组件中使用
import React from 'react';

class Demo extends React.Component {
  state = {
    page: 1,
    pageSize: 10,
    total: 0,
    dataSource: [],
  }

  componentDidMount() {
    this.getData({page: 1, pageSize: 10})
  }

  getData(params) {
    axios({
      method: 'get',
      url: '/api/getData',
      params,
    }).then(response => {
      const { page, pageSize, total, dataSource } = res.data.data;
      this.setState({ page, pageSize, total, dataSource });
    });
  }

  render() {
    const { dataSource, page, pageSize, total } = this.state;
    return <div>...</div>
  }
}

 在这些基础功能基础上,axios 支持丰富的请求参数、异常状态码判断、全局处理异常、全局配置请求参数等,具体参见 axios 文档

 

2020-01-14 10:11:01 qq_42813491 阅读数 838

  • 学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353

安装

npm i axios --save

docs

  • https://www.npmjs.com/package/axios

基本使用

const axios = require('axios');
 
// Make a request for a user with a given ID
axios.get(url)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
 

axios+react渲染数据列表

目录结构
在这里插入图片描述

  • App.js
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './components/Home'
import Info from './components/Info'
class App extends React.Component {
  render() {

    return (
      <Router>
        <Route exact path="/" component={Home}  />
        <Route path="/info/:name" component={Info} />
      </Router>
    );
  }
}

export default App;

  • Home.js
import React from 'react'
import { Link } from "react-router-dom";
import '../css/home.css'
const axios = require('axios');
class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            list: []
      
        }

    }
    getDate = () => {
        const url = "https://lengyuexin.github.io/json/app.json";
        axios.get(url)
            .then((response) => {

                this.setState({
                    list: response.data.goods[0].foods
                })
            })

    }
    componentDidMount() {
        this.getDate();
    }

    render() {
        return (
            <div>


                <div className="container">
                    <h2>热销榜单</h2>
                    <div className="list">

                        {this.state.list.map((item, i) => {
                            return (
                                <div className="list-item" key={i}>
                                    <Link  to={`/info/${item.name}`}> <img src={item.image} alt={item.name} /></Link>
                                    <p>{item.name}</p>
                                </div>

                            )
                        })}

                    </div>
                </div>
            </div>

        );
    }
}

export default Home;
  • Info.js
import React from 'react';
import '../css/info.css';
const axios = require('axios');


class Info extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
    }

    getDate = () => {
        const url = "https://lengyuexin.github.io/json/app.json";
        axios.get(url)
            .then((response) => {

                this.setState({
                    list: response.data.goods[0].foods
                })

            })

    }
    componentDidMount() {
        this.getDate();
    }

    render() {
        return (

            <div>
                {
                    this.state.list.map((item, i) => {
                        if (item.name === this.props.match.params.name) {
                            return (
                                <div className="info" key={i}>
                                    <h2>商品详情--{item.name}</h2>
                                    <img src={item.image} alt={item.name} />
                                    <div className="desc">
                                        <p>商品单价--{item.price}</p>
                                        <p>销售额--{+item.sellCount * item.price}</p>
                                        <p>{item.comments[0].text.length>0?"商品评价":"暂无评价"}</p>
                                        <ul>
                                            {
                                                item.comments.map((comment, idx) => {
                                                   
                                                if (comment.text.length > 0) {
                                                  
                                                    return (
                                                            <li key={idx} style={{ listStyle: "none" }} >
                                                                <p style={{ color: "red", marginTop: "2px" }}>{comment.text}</p>
                                                            </li>
                                                    )
                                                }
                                                return null;
                                               
                                          

                                            } )}
                                        </ul>
                                    </div>
                                </div>
                            )
                        }
                        return null;
                    })
                }


            </div>
        );
    }
}

export default Info;
  • home.css

* { box-sizing: border-box; margin:0;padding:0;}

html,body,.container{
  width:100%;
  height:100%;
  background:#f3f5f7;
  padding:4%;
  font-size:12px;
  color:#2cc95e;
  
}
.container h2{
  text-align: center;
  color:#333;
  margin-bottom:20px;
}
.container .list{
width:100%;
text-align: center;

}
.container .list .list-item {
 float:left;
 width:20%;
 box-shadow: 6px 0px 6px #999;
 padding:5px;

}

.container .list .list-item img{
  width:60px;
  height:60px;
}






  • info.css

.info{
    width:300px;
    height:600px;
    text-align: center;
    margin:20px auto;
    background-color: #fff;
    color:#333;
    padding:20px 0;
  

}
.info h2{
    font-size:16px;
   margin-bottom: 10px;

}
.info img{
    width:160px;
    height:160px;
}

.info .desc{

    border: 1px solid #333;
    margin-top:10px;
    font-size:14px;
    padding:5px;
}

效果图

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

数据接口

  • https://lengyuexin.github.io/json/app.json
2018-04-19 20:41:47 frank_come 阅读数 22220

日结博客 04.19.18 HZ

对于每次都要从页面导入axios和配置路径的行为简直没完没了地厌恶,每次后台修改api地址都得从一大堆页面里寻找到那小小的一个axios.get,简直深恶痛绝

请封装吧,万物皆能封装,封装治好了你多年的眼疾

封装更合理的Axios操作类

 

1.导入axios至你的项目

npm install --save axios

2.在根路径创建http.js

首先导入axios至http文件


import axios from 'axios'import axios from 'axios'

配置axios的默认URL

axios.defauls.baseURL = 'xxx'

配置允许跨域携带cookie

axios.defaults.withCredentials = true

配置超时时间

axios.defaults.timeout = 100000

标识这是一个 ajax 请求


axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

配置请求拦截

 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })

配置相应拦截

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

最后返回(更多配置可以查看axio的官方api)


export defaul axiosexport defaul axios

全部文件

import axios from 'axios'
axios.defauls.baseURL = 'xxx'
axios.defaults.withCredentials = true
axios.defaults.timeout = 100000
// // axios拦截器
 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
 
 axios.interceptors.response.use(response => {
     // 在这里你可以判断后台返回数据携带的请求码
    if (response.data.retcode === 200 || response.data.retcode === '200') {
      return response.data.data || response.data
    }else {
      // 非200请求抱错
      throw Error(response.data.msg || '服务异常')
 }
​
export default axios
axios.defauls.baseURL = 'xxx'
axios.defaults.withCredentials = true
axios.defaults.timeout = 100000
// // axios拦截器
 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
 
 axios.interceptors.response.use(response => {
     // 在这里你可以判断后台返回数据携带的请求码
    if (response.data.retcode === 200 || response.data.retcode === '200') {
      return response.data.data || response.data
    }else {
      // 非200请求抱错
      throw Error(response.data.msg || '服务异常')
 }
​
export default axios

是不是看到这里大失所望,别着急,接下来再新建一个api.js文件

封装一个匿名函数返回一个apis对象,通过apis对象的键名去获取对应的api地址

// 集中管理路由,所有的接口地址:
//  1.整个应用用到了哪些接口一目了然
//  2.接口地址可能变化,方便管理
​
const prefix = '' // api地址前缀
export default(config => {
    return Object.keys(config).reduce((copy, name) => {
      copy[name] = `${prefix}$config[name]`
      return copy
    }, {})
})({
  // example api
  "getExampleData": "/api/example/data" 
})
​
//  1.整个应用用到了哪些接口一目了然
//  2.接口地址可能变化,方便管理
​
const prefix = '' // api地址前缀
export default(config => {
    return Object.keys(config).reduce((copy, name) => {
      copy[name] = `${prefix}$config[name]`
      return copy
    }, {})
})({
  // example api
  "getExampleData": "/api/example/data" 
})
​

文件最终返回一个对象

// api对象
{
  getExampleData: '/api/example/data'
}
{
  getExampleData: '/api/example/data'
}

看到这里是不是有点迷糊,接下来上重头戏~

再新建一个service文件夹,在其下新建一个index.js

(src/server/index.js)


import http from '../http.js' // 导入我们封装好的axios对象
import apis from '../api.js' // 导入我们封装好的apis对象
​
export funciton getExampleData (params = {}) { // 从外部接受参数,没有参数默认为空对象
    retun http.get(apis.getExampleData, params) // return对应的get/post方法,第一个填路径,第二个给参数对象
}import http from '../http.js' // 导入我们封装好的axios对象
import apis from '../api.js' // 导入我们封装好的apis对象
​
export funciton getExampleData (params = {}) { // 从外部接受参数,没有参数默认为空对象
    retun http.get(apis.getExampleData, params) // return对应的get/post方法,第一个填路径,第二个给参数对象
}

看到这里是不是就恍然大悟了,把获取exampleData这个接口封装成了一个方法,在所需的页面调用对应的方法就好了

Vue页面引用

import { getExampleData } from 'services'
​
...
beforeCreate() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.exampleData = res // 绑定到data里
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}
...
​
...
beforeCreate() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.exampleData = res // 绑定到data里
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}
...

React页面引用

import { getExampleData } from 'services'
​
...
componentWillMount() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.setState({
            exampleData: res // 赋值到state里
        })
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}
​
...
componentWillMount() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.setState({
            exampleData: res // 赋值到state里
        })
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}

希望大家能用上这个以后不再烦恼apis的杂多或者难以管理,难以修改之类的通病

 

喜欢就点个赞吧。谢谢你~

:D

2019-05-08 17:16:38 qq_40312194 阅读数 1651
2019-07-17 13:55:46 qq_37162688 阅读数 599

在写react项目的时候,自己又重新封装了一次axios,回顾一下,尽管觉得还是有点冗余,持续优化中…

static ajax(options){
        let loading;
        //初始化参数
        let obj={
            url:'',
            method:'post',
            data:{},
            params:{},
            baseURL:serverUrl,
            timeout:10000,
            headers:{
                'Content-Type':  "application/json;charset=UTF-8"
            },
            withCredentials:true,//设置允许cookie
        }
        //传入参数替代初始参数
        for(let item in options){
            if(obj[item]!==undefined) { obj[item]=options[item]};
        }
        obj.params=obj.data;
        obj.data=''

        if (obj.data &&Object.is(obj.isShowLoading,true)){ //如果需要显示全局加载
            loading = document.getElementById('ajaxLoading');
            loading.style.display = 'block';
        }
        return new Promise( 
            async (resolve,reject)=>{
                await axios({
                ...obj
                }).then((response)=>{
                    if(!Object.is(response.status,200)) { reject(response.data); return; }
                    let res = response.data;
                    if (Object.is(res.code,0)) { resolve(res); return; }
                    if (Object.is(res.code,2)) {
                        sessionStorage.removeItem('jx_username');
                        sessionStorage.removeItem('jx_password');
                        history.push('/login');
                        res.message='登录失效,请重新登录';
                        reject(res);
                        return;
                    }
                    reject(res);
                    return;
                }).catch((res)=>{  
                        reject(res);
                })
                //取消加载
                if (obj.data && Object.is(obj.isShowLoading,true)) {
                    loading = document.getElementById('ajaxLoading');
                    loading.style.display = 'none';
                }
            }
        )
    }

React之axios、跨域

阅读数 4882