axios的使用

2023-12-14 16:34:47

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

如果您想在浏览器中使用 Axios，首先需要安装它。您可以使用 npm（Node 包管理器）或 yarn 来安装 Axios。例如，在命令行中输入以下命令：

shell复制代码

npm install axios

或

csharp复制代码

yarn add axios

安装完成后，您可以在 JavaScript 文件中引入 Axios，并使用它来发送 HTTP 请求。例如：

javascript复制代码

import axios from 'axios';
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});

如果您想在 node.js 中使用 Axios，首先需要安装它。在命令行中输入以下命令：

shell复制代码

npm install axios

或

csharp复制代码

yarn add axios

安装完成后，您可以在 JavaScript 文件中引入 Axios，并使用它来发送 HTTP 请求。例如：

javascript复制代码

const axios = require('axios');
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.js"></script>
</head>
<body>
    <script>
        // axios({
        //     url:"",
        //     method:'',
        //     // 基础路径
        //     baseUrl:"",
        //     //get delete head 一类请求携带参数
        //     params:{

        //     },
        //     //post put patch 一类请求携带
        //     data:{

        //     },
        //     //请求头
        //     headers:{},
        //     //请求超过几秒中断请求
        //     timeout:2000
        // })



        // axios get 请求返回的是一个promise对象
    //    let res =  axios({
    //         url:"http://hmajax.itheima.net/api/ambition"
    //     }).then(res =>{
    //         console.log(res);
    //     }).catch(error=>{
    //         console.dir(error)
    //     })
    //     console.log(res);
     

    // get带参数 不需要转换数据格式 axios会自动转换为json查询字符串
    //  let res = axios({
    //     url:'http://121.199.0.35:8888/index/article/pageQuery',
    //     // get类请求携带参数选项 params只接受一个纯js对象 
    //     params:{
    //         page:1,
    //         pageSize:10
    //     }
    // })
    // console.log(res);

    // post请求 post 参数 json字符串或者表单格式数据
    // post发起请求默认数据格式为json格式 请求头Content-Type也会自动设置为application/json
    // let res =  axios({
    //     url:'http://121.199.0.35:8888/user/login',
    //     method:'post',
    //     data:{
    //         username:'admin1',
    //         password:123321
    //     }
    // })
    // console.log(res);

    //post 发起表单格式的请求
    let res = axios({
        url:"http://121.199.0.35:8888/baseUser/saveOrUpdate",
        method:'post',
        data:Qs.stringify({
            username:'aaa',
            password:1111
        }),
        headers:{
            'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g'
        }
    })
    console.log(res);
    </script>
</body>
</html>

axios快捷方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
  <script>
    // axios({})==>axios.request({})

    // 快捷方法 get无参  axios.get(url,请求配置项) 
    // axios.get('http://121.199.0.35:8888/index/carousel/findAll').then(res=>{
    //   console.log(res.data,'获取响应');
    // });
    // get带参 
    // axios.get('http://121.199.0.35:8888/index/article/pageQuery',{
    //   params:{
    //     page:1,
    //     pageSize:10
    //   },
    //   headers:{
    //   },
    //   timeout:2000
    // }).then(res=>{
    //   console.log(res.data,'获取响应');
    // })

    // delete head options 
    // axios.post(url,data,请求配置项) 发起post请求 数据格式会自动转为json格式
    // let data = {
    //   username:"admin1",
    //   password:123321
    // }
    // axios.post('http://121.199.0.35:8888/user/login',data,{
    //   timeout:2000,
    //   headers:{}
    // }).then(res=>{
    //   console.log(res);
    // })
    let data = {
      username:'测试用户9999888',
      password:654789,
    };
    axios.post('http://121.199.0.35:8888/baseUser/saveOrUpdate',Qs.stringify(data),{
      headers:{
        'Authorization': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g"
      }
    }).then(res=>{
      console.log(res.data,'获取响应');
    })
  </script>
</body>
</html>

文章来源:https://blog.csdn.net/weixin_55269913/article/details/134926031
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。