前端HTTP请求库axios详解

axios简介

        axios是什么？

1. 前端最流行的ajax请求库；
2. React、Vue官方都推荐使用axios发ajax请求；
3. 文档：https://github.com/axios/axios

        axios特点

1. 基于promise的异步ajax请求库；
2. 浏览器端、node端都可以使用；
3. 支持请求、响应拦截器；
4. 支持请求取消；
5. 请求、响应数据转换；
6. 批量发送多个请求。

        解决的痛点

1. 解决了回调地狱
2. 拦截器
3. 批量发送请求

axios发送一个简单的get请求

1. axios调用的返回值是promise实例；
2. 成功的值叫reponse，失败的值叫error；
3. axios成功的值是一个axios封装的response对象，服务器返回的真正的数据在response.data中；
4. 携带query参数时，编写的配置项叫做params；
5. 携带params参数时，就需要自己手动拼在url中。

案例

• get请求不带参数

        完整版

<srcipt>
    {/* 获取按钮 */}
    const btn1 = document.getElementById('btn1')
    {/* 发送GET请求---不携带参数 */}
    btn1.onclick = ()=>{
        axios({
                url: 'http://loclhost:5000/persons',//请求地址
                methods: 'GET',//请求方式
            }).then(
                response => {
                    console.log('请求成功了', response.data);
                },
                error => {
                    console.log('请求失败了', error);
                }
            )
    }
</srcipt>

        精简版

<srcipt>
    axios.get('http://localhost:5000/persons').then(
        response => {console.log('请求成功了', response.data);},
        error => {console.log('请求失败了',error);}
    )
</srcipt>

• get请求携带参数

        完整版

<srcipt>
        axios({
                url: 'http://loclhost:5000/persons',//请求地址
                methods: 'GET',//请求方式
                params: {id: personId.value}//此处写的时params，但携带的时query参数
            }).then(
                response => {console.log('请求成功了', response.data)},
                error => {console.log('请求失败了',error)}
            )
</srcipt>

        精简版

<srcipt>
    axios.get('http://localhost:5000/person', {params: {personId.value}}).then(
            response => {console.log('请求成功了', response.data);},
            error => {console.log('请求失败了',error);}
        )
</srcipt>

• post请求携带参数

        完整版

        axios({
                url: 'http://loclhost:5000/persons',//请求地址
                methods: 'POST',//请求方式
                data: {name: personName.value, age: personAge.value}//携带请求体参数（json编码）
                // data：`name=${personName.value}&age=${personAge.value}`//携带请求体参数（urlencoded参数）
            }).then(
                response => {console.log('请求成功了', response.data)},
                error => {console.log('请求失败了',error)}
            )

      精简版  

<srcipt>
    {/* json编码 */}
    axios.post('http://localhost:5000/person', {name: personName.value, age: personAge.value}).then(
                response => {console.log('请求成功了', response.data);},
                error => {console.log('请求失败了',error);}
            )
</srcipt>

<srcipt>
    {/* urlencoded编码 */}
    axios.post('http://localhost:5000/person', `name=${personName.value}&age=${personAge.value}`).then(
                response => {console.log('请求成功了', response.data);},
                error => {console.log('请求失败了',error);}
            )
</srcipt>

• put请求

        完整版

<srcipt>
        axios({
                url: 'http://loclhost:5000/persons',//请求地址
                methods: 'PUT',//请求方式
                data: {
                    id: personUpdateId.value,
                    name: personUpdateName.value,
                    age: personUpdateAge.value
                }
            }).then(
                response => {console.log('请求成功了', response.data)},
                error => {console.log('请求失败了',error)}
            )
</srcipt>

        精简版

<srcipt>
    axios.post('http://localhost:5000/person', {
        id: personUpdateId.value,
        name: personUpdateName.value,
        age: personUpdateAge.value
    }).then(
        response => {console.log('请求成功了', response.data)},
        error => {console.log('请求失败了',error)}
    )
</srcipt>

• delete请求

//携带params参数
<srcipt>
        axios({
                url: 'http://loclhost:5000/persons/${personDeleteId.value}',//请求地址
                methods: 'DELETE',//请求方式
            }).then(
                response => {console.log('请求成功了', response.data)},
                error => {console.log('请求失败了',error)}
            )
</srcipt>

axios常用配置项

<srcipt>
        axios({
                url: 'http://loclhost:5000/persons',//请求地址
                methods: 'GET',//请求方式
                params: {delay: 3000},//配置query参数
                // data: {c:3, d:3},//配置请求体参数(json编码)
                // data: 'e=5&f=9',//配置请求体参数(urlencoded编码)
                timeout: 2000,//配置超时时间
                // headers: {demo: 123},//配置请求头
                // responseType: 'json'//配置响应数据的格式
            }).then(
                response => {console.log('请求成功了', response.data)},
                error => {console.log('请求失败了',error)}
            )
</srcipt>

给axios设置默认属性

axios.defaults.timeout = 2000
axios.defaults.headers = {token: 'd87dgyaohildjdodsdasadmlsa '}
axios.defaults.baseURL = 'http://localhost:5000'

axios常用API

axios.create(config)

• 根据指定配置创建一个新的axios，也就是每个新axios都有自己的配置；
• 新axios只是没有取消请求和批量发请求的方法，其它所有语法都是一致的。

为什么设计这个语法

        项目中有部分接口需要的配置与另一个接口需要的配置不太一样。

案例

const axios2 = axios.create({
    timeout: 3000,
    // headers: {name: 'tom'},
    baseURL: 'https://api.apiopen.top'
})

请求拦截器

是什么

        在真正发请求前执行的一个回调函数。

作用

        对所有的请求做统一处理：追加请求头、追加参数、界面loading提示等等。

案例

<srcipt>
    axios.interceptors.request.use(()=>{
        if(Date.now() % 2 === 0){
            config.headers.token = 'testtest'
        }
        return config
    })
    btn.onclick = ()=>{
        axios.get('http://localhost:5000/person', {params: {personId.value}}).then(
            response => {console.log('请求成功了', response.data);},
            error => {console.log('请求失败了',error);}
        )
    }
</srcipt>

响应拦截器

是什么

        得到响应后执行的一组回调函数。

作用

        若请求成功，对成功的数据进行处理；

        若请求失败，对失败进行进一步操作。

案例

<srcipt>
    axios.interceptors.response.use(()=>{
       response => {
           console.log('响应拦截器成功的回调执行了', response);
           if(Date.now() % 2 === 0) return response.data
           else return '时间戳不是偶数,不能给出数据'
       },
       error => {
           console.log('响应拦截器失败的回调执行了');
           alert(error)
           return new Promise(() => {})
       }
    })
    btn.onclick = ()=>{
        axios.get('http://localhost:5000/person', {params: {personId.value}}).then(
            response => {console.log('请求成功了', response.data);},
            error => {console.log('请求失败了',error);}
        )
    }
</srcipt>