React中axios的封装和使用

1.axios库的使用

axios: ajax i/o system.

主要作用于发送请求的等。
axios是目前前端使用非常广泛的网络请求库，包括Vue作者也是推荐在vue中使用axios ;
响应、转换请求和响应数据等等;
主要特点包括︰在浏览器中发送XMLHttpRequests请求、在node.js中发送 http请求、支持Promise API、拦截请求和响应数据等。

2.axios的基本使用(promise)

第一步： 安装axios npm install axios

==第二步：==使用axios发送get/post请求

/**
         * 使用get请求
         */
        axios({
            url:'http://httpbin.org/get',
            params:{
                name:'kjh',
                age:29
            },
            method:'get'
        }).then(
            res => console.log(res)
        ).catch(
            err => console.error(err)
        )



         /**
         * 使用post请求
         */
        axios({
            url:'http://httpbin.org/post',
            data:{
                name:'123',
                time:'2019-09-09'
            },
            method:'post'
        }).then(
            res => console.log(res)
        ).catch(
            err => console.error(err)
        )

==第三步：==测试我们写好的axios请求可以请求

http://httpbin.org

3.axios的基本使用(await/async)

async componentDidMount(){
        try {
            const result = await axios({
                url:'http://httpbin.org/get',
                params:{
                    name:'123',
                    age:20
                }
            })
    
            console.log(result)
        } catch(error){
            console.log(error)
        }
    }

请求成功！

4.axios配置全局baseUrl以及默认配置

//引入axios配置全局axios
import axios from 'axios'
axios.defaults.baseURL = 'https://httpbin.org';
axios.defaults.timeout = 5000;

使用：

async componentDidMount(){
        try {
            const result = await axios({
                url:'/get',
                params:{
                    name:'123',
                    age:20
                }
            })
    
            console.log(result)
        } catch(error){
            console.log(error)
        }
    }

5.axios拦截请求

//添加拦截
instance.interceptors.request.use(config => {
    console.log('请求被拦截')
    return config
},error => {

})

instance.interceptors.response.use(res => {
    
    return res.data
},error => {
    return error;
})

6.真实开发中二次封装axios

专门新建一个文件夹：service/request.js

• config.js

const devBaseURL = 'https://httpbin.org';
const proBaseURL = 'https://production.org';


export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;

export const TIMEOUT = 5000;

• request.js

import axios from 'axios';

import { BASE_URL, TIMEOUT} from './config';

const instance = axios.create({
    baseURL:BASE_URL,
    timeout:TIMEOUT
})

//添加拦截
instance.interceptors.request.use(config => {
    console.log('请求被拦截')
    return config
},error => {

})

instance.interceptors.response.use(res => {
    
    return res.data
},error => {
    return error;
})




export default instance;