axios笔记

目录

1.axios 是什么？

2.axios 的功能

3.axios的使用

4.axios 的其他使用

5.axios 的 Request Config 配置项设置

6.axios的默认配置

7.axios 创建实例对象

8.axios 的拦截器Interceptors

9.axios 与 Axios 的区别？

10.instance 与 axios 的区别？

11.axios 的请求拦截器 和 响应拦截器

12.axios的请求/响应数据转换器是什么？

13.如何取消未完成的请求？

---

 

1.axios 是什么？

        axios 是前端对流行的 ajax 请求库

2.axios 的功能

1. 可以在XMLHttpRequest中发送Ajax请求
2. 可以在nodejs中发送http请求
3. 支持promise的相关操作
4. 请求响应拦截器
5. 转换请求和响应数据
6. 可取消请求
7. 可自动将数据转换为json格式

3.axios的使用

npm install axios 和 yarn add axios 一般是在项目中使用的

可使用 CDN 中的

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script> 

对数据进行引入axios 的基本使用：

<script> 
    const btns = document.querySelectorAll('button');

    // 绑定按钮的事件函数  发送一个GET请求
    btns[0].onclick = function () {
        // 发送ajax请求   axios返回的是一个promise对象
        axios({
            //设置请求类型
            method: 'GET',
​
            //请求的地址
            url: 'http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response);
        })
    }
​
    // 绑定按钮的事件函数  发送一个POST请求
    btns[1].onclick = function () {
        // 发送ajax请求   axios返回的是一个promise对象
        axios({
            //设置请求类型
            method: 'POST',
​
            //请求的地址
            url: 'http://localhost:3000/posts',
​
            // 添加数据
            data: {
                title: '今天又是繁忙的一天呀。。。',
                author: '张三'
            }
        }).then(response => {
            console.log(response);
        })
    }
​
    // 绑定按钮的事件函数  发送一个 PUT 请求
    btns[2].onclick = function () {
        // 发送ajax请求   axios返回的是一个promise对象
        axios({
            //设置请求类型
            method: 'PUT',
​
            //请求的地址
            url: 'http://localhost:3000/posts/3',
​
            // 请求体内容
            data: {
                title: '今天又是繁忙的一天呀。。。',
                author: '李四'
            }
        }).then(response => {
            console.log(response);
        })
    }
​
    // 绑定按钮的事件函数  发送一个 delete 请求
    btns[3].onclick = function () {
        // 发送ajax请求   axios返回的是一个promise对象
        axios({
            //设置请求类型
            method: 'DELETE',
​
            //请求的地址
            url: 'http://localhost:3000/posts/3',
        }).then(response => {
            console.log(response);
        })
    }
​
</script>

4.axios 的其他使用

​
<script> 
    const btns = document.querySelectorAll('button'); 
    btns[0].onclick = function(){ //使用 axios.request({url}) 
        axios.request({ 
            merhod: "GET", 
            url: 'http://localhost:3000/comments' 
        }).then(response => { 
            console.log(response);
        }) 
    }

    btns[1].onclick = function(){
        //axios.post(url,[data][config]})
        axios.post(
            'http://localhost:3000/comments',
            {
                body: '未来教师',
                postId: 2
            }
        ).then(response => {
            console.log(response);
        })
    }
</script>
​

5.axios 的 Request Config 配置项设置

1. url:'/user' //用于设置请求的地址
2. method: 'get' //用于设置请求类型
3. baseURL: 'xxxxxx.com - ',//用于设置基础url路径，这样方便url的设置
4. transformRequest: [function (data,headers) { return data; }]
5. transformResponse: [function(data){ return data; }] //这两个参数是对 请求参数 和 响应参数 的一个预处理
6. headers: {'X-Requested-With':'XMLHttpRequest'} //设置请求头信息 主要用于身份校验
7. params : {} //用于设置URL的参数
8. paramsSerializer: function(params){} //对请求参数做序列化（使用较少）
9. data:{} /data:'' //请求体设置 一般有两种形式，一种是对象形式，一种是字符串形式 如果是对象形式，那么axios会将其转化为json字符串形式；如果是字符串形式，那么axios就直接传递

6.axios的默认配置

​<script>
    const btns = document.querySelectorAll('button');
    axios.defaults.method = 'get'; //设置默认的请求方式
    axios.defaults.baseURL = 'http://localhost:3000'; //设置默认的基础url
    axios.defaults.params = 'id=100' //设置url携带的参数
    axios.defaults.timeout = 3000; //设置请求时间

    btns[0].onclick = function(){
        axios({ url:'/profile' }).then(response =>{
            console.log(response);
        })
    }
</script>

7.axios 创建实例对象

<script>
    const btns = document.querySelectorAll('button');
    // 创建axios的实例对象  这里的duanzi 与 axios 几乎一样(但略微有点差别)
    const duanzi = axios.create({
        baseURL : 'https://api.apiopen.top',
        timeout: 2000
    });
    // duanzi({
    //     url: '/getJoke',
    // }).then(resopnse => {
    //     console.log(resopnse);
    // })
    duanzi.get(
        '/getJoke'
    ).then(response =>{
        console.log(response.data);
    })
</script>

8.axios 的拦截器Interceptors

1. 请求拦截器：对请求数据做处理，满足就发送请求，不满足就停止请求
2. 响应拦截器：对响应数据做处理，满足的响应结果就交由程序员处理，不满足的由统一的错误处理机制去处理。
3. 如果有多个 请求拦截器 和 请求拦截器 同时执行。那他们的执行顺序将是：后面的请求拦截器先执行，前面的请求拦截器后执行； 而响应拦截器则与之相反

<script>
// 设置请求拦截器
//如果有多个 请求拦截器 和 请求拦截器 同时执行 那他们的执行顺序将是 后面的请求拦截器先执行，前面的请求拦截器后执行； 而响应拦截器则与之相反

axios.interceptors.request.use(function (config) {
    console.log('请求拦截器 成功'); 
    // return config; 
    throw 'ERROR'
},function (error) {
    console.log('请求拦截器 失败');
    return Promise.reject(error);
})

    //设置响应拦截器
    axios.interceptors.response.use(response=>{
        console.log('响应拦截器  成功');
        return response;
    },error => {
        console.log('响应拦截器  失败');
        return Promise.reject(error);
    })
​
    // 发送请求
    axios({
        method: 'GET',
        url: 'http://127.0.0.1:3000/posts'
    }).then(response => {
        console.log('自定义函数结果为');
        console.log(response);
    }).catch(error=>{
        console.warn(error);
    })
</script>

9.axios 与 Axios 的区别？

1. 从语法上来看：axios不是Axios的实例
2. 从功能上来看：axios是Axios的实例
3. axios是Axios.prototype.request函数bind()返回的函数
4. axios作为对象，有Axios原型对象上的所有方法，有Axios对象上的所有属性

10.instance 与 axios 的区别？

相同点：

1. 都是一个能发任意请求的函数（当函数用） request(config)
2. 都有发特定请求的各种方法（就是当对象使用） 当对象来调用get()/post()/delete()
3. 都有默认配置和拦截器的属性 （defaluts、interceptors）

不同点：

1. 默认配置可能不同
2. instance 没有 axios 后面添加的一些方法：create()/CancelToken()/all()

11.axios 的请求拦截器 和 响应拦截器

• 请求拦截器：

1. 真正发送请求前执行的回调函数
2. 可以对请求进行检查或配置进行特定处理
3. 成功的回调函数，传递的默认是 config（必须是） 失败的回调函数，传递的默认是 error

• 响应拦截器：

1. 在请求得到响应后执行的回调函数
2. 可以对响应数据进行特定的处理
3. 成功的回调函数，传递的默认是 response 失败的回调函数，传递的默认是 error

12.axios的请求/响应数据转换器是什么？

1. 请求转换器：对请求内容进行特定的处理函数
2. 响应转换器：对响应处理的数据进行预处理
3. 注意：拦截器 其实可以将 转换器 给替换掉

13.如何取消未完成的请求？

1. 配置 cancelToken 对象时，保存 cancel 函数
2. 创建一个用于将来中断请求的 cancelPromise
3. 定义一个用于取消请求的cancel函数
4. 将cancel函数传递出来