接口调用方式 -- 总结

柿子来了

于 2024-09-03 09:00:00 发布

阅读量234

点赞数 7

文章标签： jquery axios

本文链接：https://blog.csdn.net/2301_78949452/article/details/141752895

版权

原生ajax

基于jQuery的ajax

axios

jquery的请求

<!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.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
    <script>
        $.ajax({
            url:"http://localhost:3000/api/getmsg",
            // type:"get",//请求方式
            success(res){
                console.log(res)
            },
            error(err){
                console.log(err)
            }
        })
        $.get('http://localhost:3000/api/getmsg',(res)=>{
            console.log(res)
        })
        // $.post
    </script>
</body>
</html>

promise的其他方法

<!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.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
    <script>
        try {
            console.log('a',a)
            let a = 8
        } catch (error) {
            console.log('error',error)
        }
        function fun(URL,TYPE,Data){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:`http://localhost:3000/${URL}`,
                    type:TYPE,
                    data:Data,
                    success(res){
                        resolve(res)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })
        }
        //  console.log(fun())
        // .then()得到异步任务正确的结果
        fun("api/getmsg",'get').then((res)=>{
            console.log('then里面的res',res)
        },(err)=>{
            console.log('then里面的err',err)

        // .catch()获取异常信息
        }).catch(err=>{
            console.log('err',err)

        // .finally()成功与否都会执行
        }).finally(()=>{
            console.log('不管成功还是失败都走他')
        })
    </script>
</body>
</html>

promise的all方法和race方法

<!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.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
    <script>
         function fun(URL,TYPE='get',Data){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:`http://localhost:3000/${URL}`,
                    type:TYPE,
                    data:Data,
                    success(res){
                        resolve(res)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })
        }
       let promise1 =  fun('api/promisedata1')
       let promise2 =  fun('api/promisedata2')
       let promise3 =  fun('api/promisedata3')
       Promise.all([promise1,promise2,promise3]).then(res=>{
        // 把你得到的数据都放到一个数组里面了
        console.log(res)
       })
       Promise.race([promise1,promise2,promise3]).then(res=>{ 
        // 谁跑的快就运行谁就返回谁
            console.log(res)
       })

    </script>
</body>
</html>

aixos的基本使用

<!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://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        // get请求
        axios.get('http://localhost:3000/api/getmsg').then(res=>{
            console.log(res)
        })

        axios.get('http://localhost:3000/api/getaxios3',{
            params:{
                id:999
            }
        }).then(res=>{
            console.log(res)
        })

        //post请求
         axios.post('http://localhost:3000/api/postmsg',{
             firstName: 'Fred',
             lastName: 'Flintstone'
         }).then(res=>{
            console.log(res)
        })

         axios.get('http://localhost:3000/api/getaxios4/99999').then(res=>{
            console.log(res)
        })

        axios.delete('http://localhost:3000/api/deleteaxios1',{
            params:{
                name:'小明'
            }
        }).then(res=>{
            console.log(res)
        })

        // delete请求和get传参一样
        // put请求和post请求传参一样
        axios.put('http://localhost:3000/api/putaxios1',{
                name:'小明'
        }).then(res=>{
            console.log(res)
        })

    </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>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        //配置公共的请求头
        axios.defaults.baseURL = 'http://localhost:3000';
        axios.defaults.headers['toekn'] = 'token'
        axios({
            url:"/api/getaxios3",
            params:{
                tel:"1008811"
            }
        }).then(res=>{
            console.log(res)
        })
        
    </script>
</body>
</html>

aixos的拦截器

<!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://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
    // 添加请求拦截器
    // 请求拦截器的作用是在请求发送前进行一些操作
    // 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        console.log(config);
        config.headers['xiao']='xiao'
        //这里一定要return   否则配置不成功 
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    // 响应拦截器的作用是在接收到响应后进行一些操作
    // 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        console.log(response);
        return response.data;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    axios.defaults.baseURL = 'http://localhost:3000';
        // axios.defaults.headers['toekn'] = 'token'
        axios({
            url:"/api/getaxios3",
            params:{
                tel:"1008811"
            }
        }).then(res=>{
            console.log(res)
        })

    </script>
</body>
</html>