• axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios

    目录

    axios 的理解和应用

    axios 特点：

    使用 axios 发 ajax请求

    1. 发送 GET 请求

    axios get完整版：

    axios get精简版：

    axios get请求发送时携带query参数：

    axios get携带 query参数完整版：

    axios get携带 query参数精简版：

    发送 POST 请求:

    axios post完整版：

    axios post精简版：

    发送 PUT 请求:

    axios put完整版：

    axios put精简版：

    发送 DELETE 请求：

    axios DELETE  代码：

    axios 常用配置：

    axios 可以全局配置：

    axios.create(config)配置一个新的axios

    axios 的理解和应用

    axios 是什么？
    前端最流行的 ajax 的请求库
    React/Vue 官方都推荐使用 axios 发 ajax 请求
    文档：http://github.com/axios/axios


    axios 特点：

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

    使用 axios 发 ajax请求

    1. axios 调用的返回值是 promise 实例
    2. 成功的值叫 response ，失败的值叫 error
    3. axios 成功的值是一个 axios 封装的 response 对象，服务器返回的真正数据在 response.data 中

    1. 发送 GET 请求

    1. <body>
    2.   <button id="btn">点我获取所有人的信息</button>
    3.   <script>
    4.     //获取按钮
    5.     const btn = document.getElementById('btn');
    6.  
    7.     //获取所有人的信息 发送GET请求 --- 不携带参数 
    8.     btn.onclick = () => {
    9.       //此处写axios代码！
    10.     }
    11.   </script>

    axios get完整版：

    1. const result = axios({
    2.   url: 'http://localhost:5000/persons',//请求地址
    3.   method: 'GET',//请求方式
    4. });
    5.  
    6. result.then(
    7.   response => {console.log('请求成功了！', response.data);},
    8.   error => {console.log('请求失败了，', error);}
    9. );

    axios get精简版：

    1. axios.get('http://localhost:5000/persons').then(
    2.   response => { console.log('请求成功了！', response.data); },
    3.   error => { console.log('请求失败了，', error); }
    4. );

    axios get请求发送时携带query参数：

    1. <body>
    2.   <button id="btn1">点我获取所有人的信息</button><br><br>
    3.   <button id="btn2">点我获取某个人的信息</button>
    4.   <input type="text" id="person_id" placeholder="请输入id">
    5.   <!-- 
    6. 1. axios 调用的返回值是 promise 实例
    7. 2.成功的值叫 response，失败的值叫 error
    8. 3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
    9. 4.携带query参数时，编写的配置项叫做params
    10. -->
    11.  
    12.   <script>
    13.     //获取按钮
    14.     const btn1 = document.getElementById('btn1');
    15.     const btn2 = document.getElementById('btn2');
    16.     const personId = document.getElementById('person_id');
    17.  
    18.     //获取所有人的信息 发送GET请求 --- 不携带参数 
    19.     btn1.onclick = () => {
    20.       ...........
    21.     }
    22.  
    23.     //获取某个人的信息 发送get请求 --- 携带query参数
    24.     btn2.onclick = () => {
    25.       //此处写入axios代码
    26.     }
    27.   </script>
    28. </body>

    axios get携带 query参数完整版：

    1. axios({
    2.   url:'http://localhost:5000/person',
    3.   method:'GET',
    4.   params:{id:personId.value}//此处写的params但其实传的是query参数
    5. }).then(
    6.   response =>{console.log('成功了',response.data);},
    7.   error =>{console.log('失败了',error);}
    8. )

    axios get携带 query参数精简版：

    1. axios.get('http://localhost:5000/person',{params:{id:personId.value}},).then(
    2.   response =>{console.log('成功了',response.data);},
    3.   error =>{console.log('失败了',error);}
    4. )

    发送 POST 请求:

    1. <body>
    2.   <button id="btn1">点我获取所有人的信息</button><br><br>
    3.   <button id="btn2">点我获取某个人的信息</button>
    4.   <input type="text" id="person_id" placeholder="请输入id">
    5.   <button id="btn3">点我添加一个人</button>
    6.   <input type="text" id="person_age" placeholder="请输入age">
    7.   <input type="text" id="person_name" placeholder="请输入name"><br><br>
    8.  
    9.   <script>
    10.     //获取按钮
    11.     const btn1 = document.getElementById('btn1');
    12.     const btn2 = document.getElementById('btn2');
    13.     const btn4 = document.getElementById('btn4');
    14.     const personId = document.getElementById('person_id');
    15.     const personAge = document.getElementById('person_age');
    16.     const personName = document.getElementById('person_name');
    17.  
    18.     //获取所有人的信息 发送GET请求 --- 不携带参数 
    19.     btn1.onclick = () => {
    20.       ...........
    21.     }
    22.  
    23.     //获取某个人的信息 发送get请求 --- 携带query参数
    24.     btn2.onclick = () => {
    25.       ...........
    26.     }
    27.     
    28.     //添加某个人 发送post请求 --- 携带请求体body参数
    29.     btn3.onclick = () =>{
    30.       //此处写入axios代码
    31.     }
    32.   </script>
    33. </body>

    axios post完整版：

    1. axios({
    2.   url:'http://localhost:5000/person',
    3.   method:'POST',
    4.   // data:{name:personName.value,age:personAge.value},//携带请求体参数(默认json编码)
    5.   data:`name=${personName.value}&age=${personAge.value}`,//携带请求体参数(urlencoded编码)
    6. }).then(
    7.   response =>{console.log('成功了'+response.data);},
    8.   error =>{console.log('失败了'+error);}
    9. )

    axios post精简版：

    1. //使用对象就会默认是json编码模式
    2. //axios.post('http://localhost:5000/person',{name:personName.value,age:personAge.value}).then(
    3. //是用字符串就会默认是urlencoded编码模式
    4. axios.post('http://localhost:5000/person',`name=${personName.value}&age=${personAge.value}`).then(
    5.   response =>{console.log('成功了'+response.data);},
    6.   error =>{console.log('失败了'+error);}
    7. )

    备注：axios 底层源码中也是写入一个判断，假如第二个空中为对象则使用 JSON.stringify 来解码，假如第二个空为模板字符串则使用urlencoded方式来解码。

    发送 PUT 请求:

    1. <body>
    2.   <button id="btn1">点我获取所有人的信息</button><br><br>
    3.   <button id="btn2">点我获取某个人的信息</button>
    4.   <input type="text" id="person_id" placeholder="请输入id"><br><br>
    5.   <button id="btn3">点我添加一个人</button>
    6.   <input type="text" id="person_age" placeholder="请输入age">
    7.   <input type="text" id="person_name" placeholder="请输入name"><br><br>
    8.   <button id="btn4">点我更新一个人</button>
    9.   <input type="text" id="person_update_id" placeholder="请输入一个人的id">
    10.   <input type="text" id="person_update_age" placeholder="请输入一个人的年龄">
    11.   <input type="text" id="person_update_name" placeholder="请输入一个人的姓名">
    12.  
    13.   <script>
    14.     //获取按钮
    15.     const btn1 = document.getElementById('btn1');
    16.     const btn2 = document.getElementById('btn2');
    17.     const btn3 = document.getElementById('btn3');
    18.     const btn4 = document.getElementById('btn4');
    19.     const personId = document.getElementById('person_id');
    20.     const personAge = document.getElementById('person_age');
    21.     const personName = document.getElementById('person_name');
    22.     const personUpdateId = document.getElementById('person_update_id');
    23.     const personUpdateAge = document.getElementById('person_update_age');
    24.     const personUpdateName = document.getElementById('person_update_name');
    25.  
    26.  
    27.     //获取所有人的信息 发送GET请求 --- 不携带参数 
    28.     btn1.onclick = () => {
    29.      ........
    30.     }
    31.  
    32.     //获取某个人的信息 发送get请求 --- 携带query参数
    33.     btn2.onclick = () => {
    34.       ........
    35.     }
    36.  
    37.     //添加某个人 发送post请求 --- 携带请求体body参数
    38.     btn3.onclick = () => {
    39.       ........
    40.     }
    41.  
    42.  
    43.     //更新一个人 发送PUT请求--携带json编码参数 或 urlencoded编码
    44.     btn4.onclick = () => {
    45.        //此处写入axios代码
    46.     }
    47.   </script>
    48. </body>

    axios put完整版：

    1. //完整版
    2. axios({
    3.   url: 'http://localhost:5000/person',
    4.   method: 'PUT',
    5.   data:{
    6.     id:personUpdateId.value,
    7.     name:personUpdateName.value,
    8.     age:personAge.value
    9.   }
    10. }).then(
    11.   response => { console.log('成功了' + response.data); },
    12.   error => { console.log('失败了' + error); }
    13. )

    axios put精简版：

    1. //精简版
    2. axios.put("http://localhost:5000/person",{
    3.   id:personUpdateId.value,
    4.   name:personUpdateName.value,
    5.   age:personAge.value,
    6. }).then(
    7.   response => { console.log('成功了' + response.data); },
    8.   error => { console.log('失败了' + error); }
    9. )

    发送 DELETE 请求：

    1. <body>
    2.   <button id="btn1">点我获取所有人的信息</button><br><br>
    3.   <button id="btn2">点我获取某个人的信息</button>
    4.   <input type="text" id="person_id" placeholder="请输入id"><br><br>
    5.   <button id="btn3">点我添加一个人</button>
    6.   <input type="text" id="person_age" placeholder="请输入age">
    7.   <input type="text" id="person_name" placeholder="请输入name"><br><br>
    8.   <button id="btn4">点我更新一个人</button>
    9.   <input type="text" id="person_update_id" placeholder="请输入一个人的id">
    10.   <input type="text" id="person_update_age" placeholder="请输入一个人的年龄">
    11.   <input type="text" id="person_update_name" placeholder="请输入一个人的姓名"><br><br>
    12.   <button id="btn5">点我删除一个人</button>
    13.   <input type="text" id="person_delete_id" placeholder="请输入一个人的id">
    14.  
    15.   <!-- 
    16. 1. axios 调用的返回值是 promise 实例
    17. 2.成功的值叫 response，失败的值叫 error
    18. 3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
    19. 4.携带query参数时，编写的配置项叫做params
    20. 5.携带params参数时，就需要自己手动拼在URL中
    21. -->
    22.  
    23.   <script>
    24.     //获取按钮
    25.     const btn1 = document.getElementById('btn1');
    26.     const btn2 = document.getElementById('btn2');
    27.     const btn3 = document.getElementById('btn3');
    28.     const btn4 = document.getElementById('btn4');
    29.     const btn5 = document.getElementById('btn5');
    30.     const personId = document.getElementById('person_id');
    31.     const personAge = document.getElementById('person_age');
    32.     const personName = document.getElementById('person_name');
    33.     const personUpdateId = document.getElementById('person_update_id');
    34.     const personUpdateAge = document.getElementById('person_update_age');
    35.     const personUpdateName = document.getElementById('person_update_name');
    36.     const personDeleteId = document.getElementById('person_delete_id');
    37.  
    38.  
    39.     //获取所有人的信息 发送GET请求 --- 不携带参数 
    40.     btn1.onclick = () => {
    41.       .........
    42.     }
    43.  
    44.     //获取某个人的信息 发送get请求 --- 携带query参数
    45.     btn2.onclick = () => {
    46.      .........
    47.     }
    48.  
    49.     //添加某个人 发送post请求 --- 携带请求体body参数
    50.     btn3.onclick = () => {
    51.       ........
    52.     }
    53.  
    54.  
    55.     //更新一个人 发送PUT请求--携带json编码参数 或 urlencoded编码
    56.     btn4.onclick = () => {
    57.       .........
    58.     }
    59.  
    60. 		//删除一个人 发送delete请求---携带params参数
    61.     btn5.onclick = () => {
    62.       //此处写入axios代码
    63.     }
    64.   </script>
    65. </body>

    axios DELETE  代码：

    1. //使用的params参数的方式
    2. axios({
    3.   url:`http://localhost:5000/person/${personDeleteId.value}`,
    4.   method:'DELETE',
    5. }).then(
    6.   response =>{console.log('成功了',response.data);},
    7.   error =>{console.log('失败了',error);}
    8. )

    axios 常用配置：

    1. axios({
    2.   url:"http://localhost:5000/test1",//请求地址
    3.   method:'GET',//请求方式
    4.   params:{delay:3000,b:2},//配置query参数
    5.   data:{c:3,d:4},//配置请求体参数（json编码）
    6.   data:`e=5&f=6`,//配置请求体参数（urlencoded编码）
    7.   timeout:2000,//配置超市时间
    8.   Headers:{demo:123},//配置请求头
    9.   responseType: 'json'//配置响应数据的格式(默认是json)
    10. })

    axios 可以全局配置：

    1. //给axios配置默认属性
    2. axios.defaults.timeout= 2000;//配置了默认超时时间
    3. axios.defaults.headers={school:'金科'};//配置每个请求的请求头都自带的内容
    4. axios.defaults.baseURL='http://localhost:5000';
    5. //配置请求的地址，若不配置，则axios默认从自身的地址发送请求；若配置了，写请求时不需要带以上写过的地址，只需要写后面的地址会自动拼接！

    axios.create(config)配置一个新的axios

    1. 根据指定配置创建一个新的 axios ,也就是每个新 axios 都自己的配置
    2. 新的 axios 只是没有取消请求和批量发请求的方法，其他所有的语法都是一致的，所以不是100%一样
    3. 为什么要这个语法？

    ​ 需要：项目中有部分接口需要的配置与另一部分接口需要的配置不一样

    1. <body>
    2.   <button id="btn1">点我获取所有人</button>
    3.   <button id="btn3">点我获取笑话信息</button>
    4.   <script>
    5.     const btn1 = document.getElementById('btn1');
    6.     const btn3 = document.getElementById('btn3');
    7.     
    8.     //配置axios.create的内容
    9.     const axios2 = axios.create({
    10.       baseURL:'https//api.apiopen.top',
    11.       timeout:3000,
    12.       // headers:{name:'王成'}
    13.     })
    14.  
    15.     //给axios配置默认属性
    16.     axios.defaults.timeout = 2000;
    17.     axios.defaults.headers = { school: '金科' };
    18.     axios.defaults.baseURL = 'http://localhost:5000';
    19.  
    20.     btn1.onclick = () => {
    21.       axios({
    22.         ..........
    23.       }
    24.  
    25.     btn3.onclick = () => {
    26.         axios2({
    27.           url:'/getJoke',
    28.           method:'GET',
    29.         }).then(
    30.           response =>{console.log('成功了',response.data);},
    31.           error =>{console.log('失败了',error);}
    32.         )
    33.       }
    34.   </script>
    35. </body>

    备注：axios.create( ) 配置 需要写在 axios 全局配置的前面，否则会报错（目前版本0.27.2）之前某个版本可用

  • 相关阅读:
    计算机毕业设计Java百姓点评网的设计与实现(源码+系统+mysql数据库+lw文档)
    vue3【计算属性与监听-详】
    JavaScript（五）：优雅的async/await
    【LeetCode:2216. 美化数组的最少删除数 | 贪心】
    【教程7】疯壳·ARM功能手机-BLE透传实验教程
    算法基础（二）| 高精度算法详解
    CSS变量的定义和使用 var(变量)
    基于高斯混合模型的分布拟合与参数估计：高维复数域的详细推导
    webpack 压缩图片
    【Android -- 开源库】fastjson 基本使用
  • 原文地址：https://blog.csdn.net/zqlbanzhuan/article/details/128132133