axios API的基本使用方法

作者: 小黄不头秃 | 来源:发表于2023-06-08 02:15 被阅读0次

axios深入/源码分析/拦截器原理/该对象既可以当对象使用，也
Vue-如何封装axios并且统一管理api
axios API
封装一个ajax
vue封装axios的api
ajax的取消
vue - axios封装
在 Vue-cli 中使用 axios
axios的上传与下载
VUE CDN 引入 Axios 和 Qs 及其使用方法

axios 是一个基于Promise用于浏览器和node.js的http客户端，它具有以下特征：
（1）支持浏览器和node.js
（2）支持promise
（3）能拦截请求和响应
（4）自动转换JSON数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        axios 是一个基于Promise用于浏览器和node.js的http客户端，它具有以下特征：
        （1）支持浏览器和node.js
        （2）支持promise
        （3）能拦截请求和响应
        （4）自动转换JSON数据
     -->
     <script src="./axios/axios.js"></script>
     <script>
         axios.get('https://localhost:3000/data').then(function(ret){
            console.log(ret.data);
         });
     </script>
</body>
</html>

其常用API的使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        get:查询数据
            通过url传递参数
            通过params选项传递参数
        post:添加数据
            通过选项传递参数（默认传递的是json格式）
            通过URLSearchParams传递参数(application/x-www-form-urlencoded)
        put：修改数据
            和post的方法极为类似
        delete：删除数据
            和get的方法是一样的使用params传递参数
     -->
     <script src="./axios/axios.js"></script>
     <script>
         axios.get('http://localhost:3000/axios?id=123').then(function(ret){
             console.log(ret.data)
         });
         axios.get('http://localhost:3000/axios',{
             params:{
                 id:1
             }
         }).then(function(ret){
             console.log(ret.data)
         });
         axios.delete('http://localhost:3000/axios',{
             params:{
                 id:1
             }
         }).then(function(ret){
             console.log(ret.data)
         });
         axios.post('http://localhost:3000/axios',{
             id:2,
             uname:"sunwukong"
         }).then(function(){
            console.log(ret.data);
         });
         var params = new URLSearchParams();
         params.append('uname','lisi');
         params.append('psw',123);
         axios.post('https://localhost:3000/axios',params).then(function(ret){
             console.log(ret.data)
         })
     </script>
     
</body>
</html>

axios 处理响应结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        响应结果的主要属性：
        data：实际响应回来的数据
        headers:响应头信息
        status：响应状态码
        statusText：响应状态信息

        axios的全局配置
        axios.defaults.timeout=3000;//超时时间
        axios.defaults.baseURL='http://localhost:3000/app';//默认地址
        axios.defaults.headers['mytoken']='aqwerwqwerqwer2ewrwe23eresdf23'//设置请求头
     -->
     <script src="./axios/axios.js"></script>
     <script>
         axios.defaults.timeout=3000;
         axios.defaults.baseURL='http://localhost:3000/';
         axios.defaults.headers['mytoken']='aqwerwqwerqwer2ewrwe23eresdf23';
         axios.get('data').then(function(data){
             console.log(data.data);
         })
         
     </script>
</body>
</html>