vue nine day

Fetch

基本特性

• 更加加单得数据获取方式,功能更强大、更灵活，可以看作是xhr的升级版
• 基于Promeis实现

    <script>
        // Fetch 基本用法
        fetch("url").then(function (data) {
            // text() 是fetch的一部分,返回一个promeis实例,用于获取后台返回的数据
            return data.text();
        }).then(function (data) {
            console.log(data)
        })
    </script>

常用配置

<script>
        // 常用配置选项
        // method
        // body
        // headers
        // get或者delete方式url传递参数方法?或者restful方式都可以
        // url?id=123 url/123
        // post或者put 直接在fetch第二个参数里添加body
        // 普通格式
        // {
        //     method: "post",
        //     body: "uname=lisi&pwd=123"
        // }
        // json格式
        // {
        //     method: "post",
        //         body: JSON.stringify({
        //             uname: "zhangsan",
        //             pwd: "1111"
        //         })
        // }
        // headers 也是这样添加
        fetch("url", {
            method: "get"
        }, function (data) {
            return data.text();
        }).then(function (data) {
            console.log(data)
        })
    </script>

处理json数据

        // 处理json数据
        fetch("url", {
            method: "get"
        }, function (data) {
            return data.json();
        }).then(function (data) {
            console.log(data)
        })

axios

是一个基于Promeis用于浏览器和node的http客户端。

它具有以下特征

• 支持浏览器和node
• 支持promeis
• 可以拦截请求和相应
• 自动转换json数据

 

    <!-- 引用axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // axios 基本用法
        axios.get("url").then(function(ret){
            console.log(ret.data)
        })
    </script>

 

传递参数

 

        // get和delete传参
        // 通过url传递参数和fetch一致
        // 通过params传参
        axios.get("url", {
            params: {
                id: 212
            }
        }).then(function (ret) {
            console.log(ret.data)
        })
        // post和put传参
        axios.post("url",
            {
                id: 212,
                uname: "list",
                pwd: 123
            }
        ).then(function (ret) {
            console.log(ret.data)
        })
        // 表单数据传递
        var params = new URLSearchParams();
        params.append("uname", "list")
        params.append("pwd", 123)
        axios.post("url", params).then(function (ret) {
            console.log(ret.data)
        })

 

常用全局配置

 

        // ==========================
        // axios 一些全局配置
        axios.defaults.timeout=3000 // 超时时间 超过多少时间就算请求失败
        axios.defaults.baseURL="url" // 默认地址 再写调用接口时可以直接写后面的api
        axios.defaults.headers["toke"]="dasfalsjk" // 设置请求头 这个就不用解释了吧

 

拦截器

 

        // =============================
        // 有点类似于后台的中间件
        // 请求拦截器
        // 可以做一些配置信息
        axios.interceptors.request.use(
            function(config){
                config.headers.mytoken="1231"
                return config
            },function(err){
                console.log(err)
            }
        )
        // 响应拦截器
        // 获取数据之前对数据做一些加工处理
        axios.interceptors.response.use(
            function(res){
                var data=res.data
                return res
            },function(err){
                console.log(err)
            }
        )

 

async/await

    <script>
        // async/await
        // 跟axios结合 代码可读性更高 别面套娃和疯狂嵌套
        // 如果return返回值是一个promeis实例对象
        async function queryData() {
            var ret = await axios.get("url");
            console.log(ret); // 不用去the了 打印的是json
            
        }
        queryData();
    </script>