vue第三方库axios与js原生fetch对比，axios案例

最新推荐文章于 2024-08-17 10:51:54 发布

努力努力再努力max1

最新推荐文章于 2024-08-17 10:51:54 发布

阅读量634

点赞数

分类专栏：技术文章标签： axios vue第三方库

本文链接：https://blog.csdn.net/weixin_45567983/article/details/102687102

版权

技术专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文对比了在Vue中使用axios和fetch进行数据请求的差异，指出axios提供了数据封装和自动处理，而fetch则需要手动处理数据格式。同时，文章提到了Vue中axios的常用配置和fetch的使用注意事项，并分享了一个简单的axios interceptors拦截器的使用案例。

摘要由CSDN通过智能技术生成

axios && fetch

目的：是在框架中使用数据请求

回顾：

封装ajax
jquery 【 .get .post .ajax .load 】
框架：

数据请求

使用原生js提供的fetch
使用第三方封装库： axios

Vue中可以统一对axios进行挂载

Vue.prototype.$http = axios
fetch vs axios

axios 对已获得的数据进行了一层封装 XSRF
axios底层自动对数据进行了格式化
fetch并没有进行封装，拿到就是格式化后的数据

fetch进行了多一层的格式化
res.json()
res.blob() 格式化二进制
res.text()
Axios总结 1.get方法

A: 无参数
    axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
B: 有参数
    axios({
        url: 'http://xxx',
        method: 'get' //默认就是get,这个可以省略，
        params: {
            key: value
        }
    })

2.post
    注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑
    解决步骤： 
            1. 先设置请求头 
            2. 实例化 URLSearchParams的构造器函数得到params对象
            3. 使用params对象身上的append方法进行数据的传参

// 统一设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
let params = new URLSearchParams()

// params.append(key,value)

params.append('a',1)
params.append('b',2)

axios({
    url: 'http://localhost/post.php',
    method: 'post',
    data: params，
      headers: {  //单个请求设置请求头
       'Content-Type': "application/x-www-form-urlencoded"
    }
})
.then(res => {
    console.log( res )
})
.catch( error => {
    if( error ){
    throw error
}
})

Fetch
1.get

fetch('http://localhost/get.php?a=1&b=2')
    .then(res=> res.text()) // 数据格式化 res.json() res.blob()
    .then(data => {
        console.log( data )
    })
    .catch(error => {
        if( error ){
        throw error
    }
})

注意事项：
A: fetch 的 get 请求的参数是直接连接在url上的，我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个，第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据
格式化处理方式有

fetch('./data.json')
.then(res=>{
    res.json() //res.text() res.blob()
})
.then( data => console.log(data))
.catch( error => console.log( error ))

2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82

fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975
历史
Vue1.0
Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做 vue-resource
vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
vue-resource使用形式和axios一样的
this. $h t t p . g e t t h i s .$ http.post
this.$http({})
vue-resource有jsonp方法,而axios是没有的
Vue2.0
axios [ 可以说是目前最好的数据请求的封装库 ]
fetch
3.2 计算属性

computed 是Vue中的一个选项

作用：？

业务：如果我想让一个字符串反向，如何实现？

分析： 反向 -> 数组【 reverse 】

3.2.1 侦听属性

watch 是Vue中一个选项

作用：？

监听数据的变化，当数据发生改变时，我们完成一些操作
业务：

watch: {
      firstName ( val ) {
        this.fullName = val + this.lastName
      },
      lastName ( val ) {
        this.fullName = this.firstName + val 
      },
      num: {
        deep: true, // 深度监听      
        handler ( val ) {
          //  当num发生改变时，触发的方法
          console.log( val )
        }
      }
    }

总结： methods vs computed vs watch
项目中如何使用
事件处理程序： methods
watch 有大量数据交互和异步处理时进行
computed
有逻辑处理
V中像全局变量一样使用
3.3 混入【青铜】

minxin

混入的形式
全局混入【不推荐】
局部混入
混入的作用：
将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想
局部混入的使用
选项 minxins
全局混入
Vue.mixin({})
3.4 组件【王者】

了解前端组件化发展历史
前后端耦合
前后端不分离项目
找后台搭建项目开发环境
寻找项目目录中的静态资源目录
js
img
css
同步修改css
前后端分离
前端团队合作项目的出现
组件化为了解决多人协作冲突问题
复用
组件的概念
组件是一个html 、 css 、js 、img 等的一个聚合体
Vue中的组件属于扩展性功能
通过 Vue.extend() 来扩展的

ƒ Vue (options) {
    if (!(this instanceof Vue)
       ) {
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}
ƒ VueComponent (options) {
    this._init(options);
}

VueComponet这个构造函数我们不进行new实例化，我们希望组件是以标签化的形式展示
-->

组件要想合法化，必须注册解析
组件的注册【创建】
全局注册
局部注册
组件的规则
is属性 - 动态组件 - 动态缓存组件
template模板标签
直接子元素有且仅有一个
组件的嵌套

axios小案例+interceptors拦截

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
        h1 {
            display: none;
            text-align: center;
        }
        
        .show {
            display: block;
        }
        
        ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        
        a {
            text-align: center;
            margin-bottom: 10px;
        }
        
        li {
            list-style: none;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 2px 2px 2px #e0e0e0;
            margin: 5px;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="get">getData</button>
        <h1>正在加载。。。</h1>
        <ul>
            <li v-for="movie in movies" :key="movie.id">
                <a> {{movie.name}}</a>
                <img v-bind:src="movie.poster" alt="">
            </li>

        </ul>
    </div>
</body>
</html>

2.js代码

<script>
    // 添加请求拦截器
    axios.interceptors.request.use(function(config) {
        // 在发送请求之前做些什么
        document.querySelector('h1').className = 'show'
        return config;
    }, function(error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function(response) {
        // 对响应数据做点什么
        document.querySelector('h1').className = ''
        return response;
    }, function(error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    new Vue({
        el: '#app',
        data: {
            movies: null,
        },
        methods: {
            get() {
                axios({
                    url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809",
                    headers: {
                        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154277371928424093566579"}',
                        'X-Host': 'mall.film-ticket.film.list'
                    }
                }).then(res => {
                    console.log(res)
                    this.movies = res.data.data.films
                })
            },

        },

    })
</script>

3.css代码

 <style>
        h1 {
            display: none;
            text-align: center;
        }
        
        .show {
            display: block;
        }
        
        ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        
        a {
            text-align: center;
            margin-bottom: 10px;
        }
        
        li {
            list-style: none;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 2px 2px 2px #e0e0e0;
            margin: 5px;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
        }
    </style>