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

发布时间:2023-08-13 14:00

目录

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 请求

<body>
  <button id="btn">点我获取所有人的信息</button>
  <script>
    //获取按钮
    const btn = document.getElementById('btn');

    //获取所有人的信息 发送GET请求 --- 不携带参数 
    btn.onclick = () => {
      //此处写axios代码!
    }
  </script>

axios get完整版:

const result = axios({
  url: 'http://localhost:5000/persons',//请求地址
  method: 'GET',//请求方式
});

result.then(
  response => {console.log('请求成功了!', response.data);},
  error => {console.log('请求失败了,', error);}
);

axios get精简版:

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

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

<body>
  <button id="btn1">点我获取所有人的信息</button><br><br>
  <button id="btn2">点我获取某个人的信息</button>
  <input type="text" id="person_id" placeholder="请输入id">
  <!-- 
1. axios 调用的返回值是 promise 实例
2.成功的值叫 response,失败的值叫 error
3.axios成功的值是一个axios封装的response对象,服务器返回的真正数据在response.data中
4.携带query参数时,编写的配置项叫做params
-->

  <script>
    //获取按钮
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const personId = document.getElementById('person_id');

    //获取所有人的信息 发送GET请求 --- 不携带参数 
    btn1.onclick = () => {
      ...........
    }

    //获取某个人的信息 发送get请求 --- 携带query参数
    btn2.onclick = () => {
      //此处写入axios代码
    }
  </script>
</body>

axios get携带 query参数完整版:

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

axios get携带 query参数精简版:

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

发送 POST 请求:

<body>
  <button id="btn1">点我获取所有人的信息</button><br><br>
  <button id="btn2">点我获取某个人的信息</button>
  <input type="text" id="person_id" placeholder="请输入id">
  <button id="btn3">点我添加一个人</button>
  <input type="text" id="person_age" placeholder="请输入age">
  <input type="text" id="person_name" placeholder="请输入name"><br><br>

  <script>
    //获取按钮
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn4 = document.getElementById('btn4');
    const personId = document.getElementById('person_id');
    const personAge = document.getElementById('person_age');
    const personName = document.getElementById('person_name');

    //获取所有人的信息 发送GET请求 --- 不携带参数 
    btn1.onclick = () => {
      ...........
    }

    //获取某个人的信息 发送get请求 --- 携带query参数
    btn2.onclick = () => {
      ...........
    }
    
    //添加某个人 发送post请求 --- 携带请求体body参数
    btn3.onclick = () =>{
      //此处写入axios代码
    }
  </script>
</body>

axios post完整版:

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

axios post精简版:

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

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

发送 PUT 请求:

<body>
  <button id="btn1">点我获取所有人的信息</button><br><br>
  <button id="btn2">点我获取某个人的信息</button>
  <input type="text" id="person_id" placeholder="请输入id"><br><br>
  <button id="btn3">点我添加一个人</button>
  <input type="text" id="person_age" placeholder="请输入age">
  <input type="text" id="person_name" placeholder="请输入name"><br><br>
  <button id="btn4">点我更新一个人</button>
  <input type="text" id="person_update_id" placeholder="请输入一个人的id">
  <input type="text" id="person_update_age" placeholder="请输入一个人的年龄">
  <input type="text" id="person_update_name" placeholder="请输入一个人的姓名">

  <script>
    //获取按钮
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
    const btn4 = document.getElementById('btn4');
    const personId = document.getElementById('person_id');
    const personAge = document.getElementById('person_age');
    const personName = document.getElementById('person_name');
    const personUpdateId = document.getElementById('person_update_id');
    const personUpdateAge = document.getElementById('person_update_age');
    const personUpdateName = document.getElementById('person_update_name');


    //获取所有人的信息 发送GET请求 --- 不携带参数 
    btn1.onclick = () => {
     ........
    }

    //获取某个人的信息 发送get请求 --- 携带query参数
    btn2.onclick = () => {
      ........
    }

    //添加某个人 发送post请求 --- 携带请求体body参数
    btn3.onclick = () => {
      ........
    }


    //更新一个人 发送PUT请求--携带json编码参数 或 urlencoded编码
    btn4.onclick = () => {
       //此处写入axios代码
    }
  </script>
</body>

axios put完整版:

//完整版
axios({
  url: 'http://localhost:5000/person',
  method: 'PUT',
  data:{
    id:personUpdateId.value,
    name:personUpdateName.value,
    age:personAge.value
  }
}).then(
  response => { console.log('成功了' + response.data); },
  error => { console.log('失败了' + error); }
)

axios put精简版:

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

发送 DELETE 请求:

<body>
  <button id="btn1">点我获取所有人的信息</button><br><br>
  <button id="btn2">点我获取某个人的信息</button>
  <input type="text" id="person_id" placeholder="请输入id"><br><br>
  <button id="btn3">点我添加一个人</button>
  <input type="text" id="person_age" placeholder="请输入age">
  <input type="text" id="person_name" placeholder="请输入name"><br><br>
  <button id="btn4">点我更新一个人</button>
  <input type="text" id="person_update_id" placeholder="请输入一个人的id">
  <input type="text" id="person_update_age" placeholder="请输入一个人的年龄">
  <input type="text" id="person_update_name" placeholder="请输入一个人的姓名"><br><br>
  <button id="btn5">点我删除一个人</button>
  <input type="text" id="person_delete_id" placeholder="请输入一个人的id">

  <!-- 
1. axios 调用的返回值是 promise 实例
2.成功的值叫 response,失败的值叫 error
3.axios成功的值是一个axios封装的response对象,服务器返回的真正数据在response.data中
4.携带query参数时,编写的配置项叫做params
5.携带params参数时,就需要自己手动拼在URL中
-->

  <script>
    //获取按钮
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
    const btn4 = document.getElementById('btn4');
    const btn5 = document.getElementById('btn5');
    const personId = document.getElementById('person_id');
    const personAge = document.getElementById('person_age');
    const personName = document.getElementById('person_name');
    const personUpdateId = document.getElementById('person_update_id');
    const personUpdateAge = document.getElementById('person_update_age');
    const personUpdateName = document.getElementById('person_update_name');
    const personDeleteId = document.getElementById('person_delete_id');


    //获取所有人的信息 发送GET请求 --- 不携带参数 
    btn1.onclick = () => {
      .........
    }

    //获取某个人的信息 发送get请求 --- 携带query参数
    btn2.onclick = () => {
     .........
    }

    //添加某个人 发送post请求 --- 携带请求体body参数
    btn3.onclick = () => {
      ........
    }


    //更新一个人 发送PUT请求--携带json编码参数 或 urlencoded编码
    btn4.onclick = () => {
      .........
    }

		//删除一个人 发送delete请求---携带params参数
    btn5.onclick = () => {
      //此处写入axios代码
    }
  </script>
</body>

axios DELETE  代码:

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

axios 常用配置:

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

axios 可以全局配置:

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

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

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

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

<body>
  <button id="btn1">点我获取所有人</button>
  <button id="btn3">点我获取笑话信息</button>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn3 = document.getElementById('btn3');
    
    //配置axios.create的内容
    const axios2 = axios.create({
      baseURL:'https//api.apiopen.top',
      timeout:3000,
      // headers:{name:'王成'}
    })

    //给axios配置默认属性
    axios.defaults.timeout = 2000;
    axios.defaults.headers = { school: '金科' };
    axios.defaults.baseURL = 'http://localhost:5000';

    btn1.onclick = () => {
      axios({
        ..........
      }

    btn3.onclick = () => {
        axios2({
          url:'/getJoke',
          method:'GET',
        }).then(
          response =>{console.log('成功了',response.data);},
          error =>{console.log('失败了',error);}
        )
      }
  </script>
</body>

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号