axios的请求合并以及参数配置

最新推荐文章于 2025-07-02 10:25:35 发布

smile_team

最新推荐文章于 2025-07-02 10:25:35 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/smile_team/article/details/108464541

Ajax 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了axios，一个基于Promise的HTTP库，用于发起Ajax请求。详细阐述了axios的安装方式、相关文档、支持的参数配置，特别是请求合并及参数配置的优先级规则。通过示例代码展示了GET和POST请求的使用，以及返回结果的数据结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主流Ajax库

下载地址

Using npm：$ npm install axios --save
Using bower:$ bower install axios
Using cdn:‘script’ src=“https://unpkg.com/axios/dist/axios.min.js”>‘/script’

支持的参数配置

url
options

代码测试

GET请求中会把PARAMS中的键值对拼接成URLENCODE格式的字符串，然后以问号传递参数的方式，传递给服务器（基于URL后面拼接也可）
```
 axios.get('/url',{
            params:{
                name :'zhufeng',
                age:9
            }
        })
```
配置顶中传递的内容都相当于基于请求主体传递给服务器，但是传递给服务器的内容格式是RAW（JSON格式的子字符串）
```
axios.post('/url',{
                name :'zhufeng',
                age:9
        })
```

基于GET或者POST方法发请求，返回的结果都是PORMISE实例

let promise = axios.get('/url')
        promise.then(result => {
            //console.log(result) //获取的结果是一个对象
            
        }).catch(msg => {
            console.log(msg);//请求失败的原因
        })

在这里插入图片描述

data - 从服务器获取的响应主体内容
headers - 从服务器获取的响应的头信息
request - 创建的AJAX实例
status - 状态码
statusText - 状态码的描述
config - 基于AXIOS发送请求的时候做的配置项

注意：head请求方法中没有data响应主体

axios的请求合并以及参数配置

同时执行三个请求

let sendAry = [
            axios.get('/url'),
            axios.get('/url'),
            axios.post('/url')
        ];
        //两个请求都完成才做一件事，可以基于ALL实现
        axios.all(sendAry).then(result => {
            console.log(result)
        })

在这里插入图片描述

axios.post('/add',{
                lx : 12,
                header:{xxx:'xxx'}
        }).then(result => {
            console.log(result)
        })

在这里插入图片描述

配置中的优先级

config配置将会以优先级来合并，顺序为lib/defauts.js中的默认配置，然后是实例中的默认配置，最后是请求中的config参数的配置，越往后等级越高，后面的会覆盖前面的例子
config配置将会以优先级来合并，顺序为lib/defauts.js中的默认配置，然后是实例中的默认配置，最后是请求中的config参数的配置，越往后等级越高，后面的会覆盖前面的例子

测试代码

<!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>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
    <script>
        //初始化一些常用的配置项
        axios.defaults.baseURL = '/url'

        /*
        //设置响应拦截器 - 分别在响应成功和响应失败的时候做一些拦截处理（在执行成功后设定的方法之前，先会执行拦截器中的方法）
        axios.interceptors.response.use(function success(res){
            return res.data;
        },function error(){

        })
        */

        axios.defaults.validateStatus = function validateStatus(status){
            //自定义成功失败规则
            return /^(2|3|4)\d{2}$/.test(status)
        }
        //设置在POST请求中基于请求主体向服务器发送内容的格式，默认是RAW，项目中常用的事URL-ENCODEED格式
        axios.defaults.headers.post['Content-Type'] = 'appliction/x-www-form-urlencoded';
        
        axios.defaults.transformRequest = data => {
            //data - 就是请求主体中需要传递给服务器的内容(对象)
            let str = ``;
            for(let attr in data){
                if(data.hasOwnProperty(attr)){
                    str += `${attr}=${data[attr]}&`
                }
            }
            return str
        }
        

        /*
        axios.defaults.timeout = 3000;
        //自定义请求头
        axios.defaults.headers = {
            name:'222'
        }
        //GET传参
        axios.defaults.params = {}
        //POST传参
        axios.defaults.data = {}
        */

        /*
        //使用
        axios.get('/list',{
            parames :{
                lx : 12
            }
        }).then(result => {
            console.log(result)
            //result.headers; - 服务器返回的响应头信息
        })

        //POST - 三个参数 axios.post(url[,data][,config])
        axios.post('/add',{
                lx : 12
        },{
           paramsSerializer(params){
               return 'AAA';
           }
        }).then(result => {
            console.log(result)
        })
        */
        
    </script>
</body>
</html>