学习 axios 的使用方法

因为学习的 Vue 要用到此请求，学习并记录一下。

Vue 和 React 的官方都比较推荐使用 axios 来进行发送请求。

正文

1. axios 安装与引入

项目中常使用这两种方式安装

npm install axios
yarn add axios

学习中常使用 cdn 的方式进行引入，引入两种其一即可

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

如果速度较慢的话，可以使用 bootcdn 中的

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

2. axios 基本使用

        官方文档地址 https://github.com/axios/axios#features

  1.请求

    发送常用请求

<script>
    //发送GET查询请求
        axios({
            //请求类型
            method:'GET',
            //URL
            url:'http//localhost:8080/xxx'
        }).then(response =>{
            console.log(response)
        },err=>{
			console.log(err);
			});
    //发送添加POST请求
        axios({
            //请求类型
            method:'POST',
            //URL
            url:'http//localhost:8080/xxx',
            //设置请求体
            data:{
                xx:xx,
                xxx:xxx
            }
        }).then(response =>{
            console.log(response)
        },err=>{
			console.log(err);
			});
    //发送更新PUT请求
        axios({
            //请求类型
            method:'PUT',
            //URL
            url:'http//localhost:8080/xxx/xxid',
            //设置请求体
            data:{
                xx:xx,
                xxx:xxx
            }
        }).then(response =>{
            console.log(response)
        },err=>{
			console.log(err);
			});
    //发送删除DELETE请求
        axios({
            //请求类型
            method:'DELETE',
            //URL
            url:'http//localhost:8080/xxx/xxid',
        }).then(response =>{
            console.log(response)
        },err=>{
			console.log(err);
			});
</script>

其他方式发送请求

<script>
    //发送GET请求
	//axios()一样
    axios.request({
        method:'GET',
        url:'http://localhost:8080/xxxs'
    }).then(response =>{
        console.log(response)
    },err=>{
		console.log(err);
		})

    //发送POST请求
    //axios()
    axios.post(
        //URL
        'http://localhost:8080/xxxs',
        {
            //参数
            "xx":xx
            "xxx":"xxx"
        }).then(response =>{
        console.log(response);
    },err=>{
		console.log(err);
		})
</script>

其他的常见的请求使用方式

2.响应

3.axios默认设置

<script>
    //设置默认的请求类型为GET
    axios.defaults.method = 'GET';
    //设置基础URL
    axios.defaults.baseURL = 'http://localhost:8080';
    //设置超时时间，单位毫秒
    axios.defaults.timeout = 3000;
</script>

4.创建实例对象发送请求

<script>
    //创建实例对象
    const duanzi = axios.create({
        baseURL:'http://localhost:8080'
        timeout:3000
    });
    //这里的 duanzi 和 axios 对象的功能几乎是一样的
    duanzi({
        url:'/xxxs',
    }).then(response=>{
        console.log(response);
    },err=>{
		console.log(err);
		})
</script>

5.拦截器

  1.请求拦截器  满足条件才能发送器请求

<script>
	//设置请求拦截器  config 配置对象
    axios.interceptors.request.use(function(config){
        console.log('请求拦截器 成功');
        //可修改 config 中的参数
        config.params = {a:100};
        return config;
    },function (error){
        console.log('请求拦截器 失败');
        return Promist.reject(error);
    })
</script>

  2.响应拦截器  在我们处理结果之前帮助我们对返回的结果进行一个预处理，比如格式化数据

<script>
	axios.interceptors.response.use(function (response){
        console.log('响应拦截器 成功');
        return response;
        //自定义返回响应的话可直接在请求中得到自己想要的数据，比如
        // return response.data;
        //可直接获取到查询中的data中的数据
    },function (error){
        console.log('响应拦截器 失败');
        return Promise.reject(error);
    })
</script>

3.拦截器的自定义请求

<script>
	//发送请求
    axios({
        method:'GET',
        url:'http://localhost:8080/xxxs'
    }).then(response => {
        console.log('自定义回调处理成功的结果');
        console.log(response);
    }).catch(reason => {
        console.log('自定义失败回调');
    })
</script>

6.取消请求

<script>
    // 2.声明全局变量
    let cancel = null;
	xxx = function() {
        if(cancel !== null){
            //取消上一次请求
            cancel();
        }
        axios({
            method:'GET',
            url:'http://localhost:8080/xxxs',
            //1.添加配置对象的属性
            cancelToken: new axios.CancelToken(function(c){
                // 3. 将c的值赋值给 cancel
                cancel = c;
            })
        }).then(response => {
            console.log(response);
            //将 cancel 的值初始化
            cancel = null;
        })
    }
    //执行 cancel 函数来触发取消请求
    xxx = function (){
        cancel();
    }
</script>

再学学，再记录

end.