10-react axios基本使用与封装

安装axios

yarn add axios

基本使用

        axios({
            method:"get",
            url:"http://httpbin.org/get",
            params:{
                name:"zhao",
                password:"123"
            }
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

        axios({
            method:"post",
            url:"http://httpbin.org/post",
            data:{
                name:"kobe",
                password:"234"
            }
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

使用await async

//使用await
        const res = await axios({
            method:"get",
            url:"http://httpbin.org/get",
            params:{
                id:2
            }
        })
        console.log(res);

//捕捉错误
        try {
            const res = await axios({
                method:"get",
                url:"http://httpbin.org/get",
                params:{
                    id:2
                }
            })
            console.log(res);
        } catch (error) {
            console.log(error);
        }

多个请求并发

//发送多个并发请求
        const request1 = axios({
            method:"get",
            url:"http://httpbin.org/get",
            params:{
                id:2
            }
        })
        const request2 = axios({
            method:"post",
            url:"http://httpbin.org/post",
            data:{
                id:1
            }
        })
        axios.all([request1,request2]).then(res =>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

axios(config)和axios.get()或axios.post()有上什么区别呢？

看源码就会发现，axios.get()或axios.post本质上最终都是在调用axios的request

 axios实例

当我们在公司向多个服务器发送请求，需要创建不同的实例

//axios实例
        const instance = axios.create({
            baseURL:"http://httpbin.org"
        })

        instance({
            method:"post",
            url:"/post",
            data:{
                id:1
            }
        }).then(res=>{
            console.log(res);
        })

优先级

• 优先是请求的config参数配置；

• 其次是实例的default中的配置；

• 最后是创建实例时的配置；

请求与响应拦截

//请求与响应拦截
        axios.interceptors.request.use(config=>{
            //发送网络请求时添加Loading组件
            
            //判断是否有token，进行添加或者跳转到登录页面

            //对请求参数进行序列化
            console.log("进行了请求拦截");
            return config
        },err=>{

        })

        axios.interceptors.response.use(res=>{
            return res.data
        },err=>{
            if (err && err.response) {
                switch (err.response.status) {
                  case 400:
                    console.log("400错误");
                    break;
                  case 401:
                    console.log("401错误");
                    break;
                  default:
                    console.log("其他错误");
                }
              }
              return err;
        })

封装

项目开发时，一般创建一个service文件夹

 constant.js

let BASEURL = ''
//开发环境
if (process.env.NODE_ENV === 'development') {
    BASEURL = ''
} else if(process.env.NODE_ENV === 'production') {  //生产环境
    BASEURL = ''
} else {
    BASEURL = '/'
}


let TIMEOUT = 5000

export {BASEURL,TIMEOUT}

request.js

import axios from 'axios'

import {BASEURL,TIMEOUT} from './constant'
//不用默认的实例axios,自己创建一个
const instance = axios.create({
    baseURL:BASEURL,
    timeout:TIMEOUT
})
//添加拦截器
instance.interceptors.request.use(config=>{
    //发送网络请求时添加Loading组件
    
    //判断是否有token，进行添加或者跳转到登录页面

    //对请求参数进行序列化
    console.log("进行了请求拦截");
    return config
},err=>{

})

instance.interceptors.response.use(res=>{
    return res.data
},err=>{
    if (err && err.response) {
        switch (err.response.status) {
          case 400:
            console.log("400错误");
            break;
          case 401:
            console.log("401错误");
            break;
          default:
            console.log("其他错误");
        }
      }
      return err;
})

axios({
    method:"get",
    url:"http://httpbin.org/get",
    params:{
        name:"zhao",
        password:"123"
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})


export default instance

项目中使用

import React, { PureComponent } from 'react'
import request from './service/request'
export default class App extends PureComponent {
    render() {
        return (
            <div>
                app
            </div>
        )
    }
    componentDidMount(){
        request({
            url:"/get",
            method:"get",
            params:{
                name:"zhao"
            }
        }).then(res=>{
            console.log(res);
        })
    }
}