粗略学习axios笔记

最新推荐文章于 2024-10-17 17:15:00 发布

你过来啊zzz

最新推荐文章于 2024-10-17 17:15:00 发布

阅读量129

点赞数

文章标签： ajax js javascript

本文链接：https://blog.csdn.net/Depressione/article/details/108485689

版权

什么是axios

是一个类库，基于promise管理的Ajax库

提供了对应的请求方法，例如：get、post、head、delete、put。options等等

axios简单请求示例

支持的参数配置：

axios.get(url,options)

url：请求的地址
options：配置项目

get请求中会把params键值对拼接成urlencoded格式的字符串，然后以问好传递参数的方式传递给服务器，类似于jQuery的Ajax中的data，或者自己在url后面拼接也行

axios.post(url,options)

url：请求的地址
options：配置项目

配置项目中传递的内容都相当于基于请求主体传递给服务器，但是传递给服务器的内容格式是JSON字符串格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios测试</title>
</head>

<body>

</body>

<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    //是一个类库，基于promise管理的Ajax库
    //1.get请求中会把params键值对拼接成urlencoded格式的字符串，然后以问好传递参数的方式传递给服务器，类似于jQuery的Ajax中的data
    // axios.get('./serverTest.js', {
    //     params: {
    //         name: '小明',
    //         age: 9
    //     }
    // });
    //2.此步post结果出现405，是因为绝大多数web服务器，都不允许静态文件响应POST请求
    //配置项目中传递的内容都相当于基于请求主体传递给服务器，但是传递给服务器的内容格式是JSON字符串格式
    // axios.post('./serverTest.js', {
    //     params: {
    //         name: '小明',
    //         age: 9
    //     }
    // });

    //3.基于get或post方法发送请求，返回的结果都是promise实例
    // let promise = axios.get('./serverTest.js');
    // promise.then(result => {
    //     console.log(result);
    //     console.log(result.data)
    //     /*
    //     此时得到的是个对象
    //     包括得到的一些配置项，服务器数据，响应头，创建的Ajax实例，状态码，状态码的描述*/
    // }).catch(msg => {
    //     console.log(msg) //请求失败的原因
    // })

    // let promise = axios.post('./serverTest.js', {
    //     name: "小明",
    //     age: 9
    // });
    // promise.then(result => {
    //     console.log(result);
    //     console.log(result.data)
    //     /*
    //     此时得到的是个对象
    //     包括得到的一些配置项，服务器数据（JSON格式的字符串），响应头，创建的Ajax实例，状态码，状态码的描述*/
    // }).catch(msg => {
    //     console.log(msg) //请求失败的原因
    // }) //此步post结果出现405，是因为绝大多数web服务器，都不允许静态文件响应POST请求

    let promise = axios.head('./serverTest.js');
    promise.then(result => {
        console.log(result);
        console.log(result.data)
        /*
        此时得到的是个对象
        包括得到的一些配置项，响应头，创建的Ajax实例，状态码，状态码的描述*/
        //head请求只有响应头没有相应主体
    }).catch(msg => {
        console.log(msg) //请求失败的原因
    })
</script>

</html>

axios一次性并发多个请求

all()方法可当两（多）个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios练习2</title>
</head>

<body>

</body>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    //1.简单形式：
    // let result = null;//存在全局变量之后就都可以得到A的结果和B的结果
    // axios.get('A').then(resultA => {
    //     result = resultA
    //     return axios.get('B');
    // }).then(resultB => {
    //     //A和B都成功执行才会进行到这步，不过这里的result是B完成的结果
    // })
    //2.all()方法
    //sendAry存放两个Ajax请求的promise实例
    let sendAry = [
        axios.get('package.json'), axios.get('serverTest.js')
    ];
    //两个请求都完成在做一些操作
    axios.all(sendAry).then(result => {
        console.log(result);
    });
</script>

</html>

axios的API

axios可以通过配置（`config`）来发送请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios的一些API</title>
</head>

<body>

</body>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    //1.axios可以通过配置文件来发送请求
    axios({
        method: 'POST',
        url: 'serverTest.js',
        data: {
            name: '小明',
            age: 18
        }
    })
    //1.1 默认的get方式
    axios('serverText.js')
</script>

</html>

请求配置

axios.request(config);

axios.get(url[,config]);

axios.delete(url[,config]);

axios.head(url[,config]);

axios.post(url[,data[,config]]);

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

当我们使用别名方法的时候，只需要直接在里面写后续配置文件就好了（get方式）

<script>
    //初始化一些常用的配置项
    axios.defaults.baseURL = '../serverTest.js';
    //初始化之后使用
    axios.get('/list').then(result => {
        console.log(result)
    }) //此时访问的是 serverTest.js中的/list，这里请求的是静态页面所以理解意思就可以了
    //即初始化配置了URL，那么之后就是在这个基础上继续接着往下写
</script>

post方式，post有三个参数

axios.post(url,[,data][,config])

axios.post('/add', {
        lx: 12
    }, {
        headers: {
            xxx: 'XXX'
        }
    }).then(result => {
        console.log(result)
    }) //post三个参数    一个url，一个data，一个配置属性

自定义成功失败规则

axios.defaults.validateStatus = function vakudateStatus(status) {
        return /^(2|3)\d{2}$/.test(status) //此方法相当于把默认的状态码规则改了
        //即自定义成功失败规则
    };

自定义请求头信息

//修改请求头
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    //设置在post请求中基于请求主体向服务器发送内容的格式，默认是RAW，项目中常用的是URL-ENDODED格式

响应拦截器

//设置响应拦截器
    axios.interceptors.response.use(function success(result) {
        console.log(result)
    }, function error() {

    }); //分别在响应成功和响应失败的时候做一些拦截处理(在执行成功后设定的方法之前，先会执行拦截器中的方法)