数据请求axios vs fetch / computed计算属性&watch侦听属性 / mixin全局、局部混入

最新推荐文章于 2023-07-07 11:31:39 发布

ccc_y

最新推荐文章于 2023-07-07 11:31:39 发布

阅读量514

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/ccc_y/article/details/90645936

版权

本文探讨了前端开发中的数据请求，重点比较了axios和fetch两种常见方式。介绍了axios如何封装请求，fetch的直接返回特性，并给出了get和post请求的示例。此外，还讨论了vue中computed、watch和methods的区别，以及mixin的使用场景和优势，强调了在项目中如何选择和应用这些技术。

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

数据请求

数据请求在前端开发中的使用有两种形式

使用原生javascript提供的数据请求

ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 )
fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 )
- 使用格式：

使用别人封装好的第三方库
目前最流行的，使用率最高的是 axios

vue中我们最常使用的

vue 1.x 的版本提供了一个封装库 vue-resource , 但是到了vue 2.x版本之后，这个就弃用了
vue-resource使用方法和 axios 相似度在 95%
vue-resouce有jsonp方法，但是axios是没有的
vue2.x版本我们最用使用的数据请求是 axios 和 fetch

数据请求的类型

get
post
head
put
delete
option
…

axios vs fetch

axios得到的结果会进行一层封装，而fetch会直接得到结果

举例：
axios

    {
   data: 3, status: 200, statusText: "OK", headers: {
   …}, config: {
   …}, …}
    config: {
   adapter: ƒ, transformRequest: {
   …}, transformResponse: {
   …}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
    data: 3
    headers: {
   content-type: "text/html; charset=UTF-8"}
    request: XMLHttpRequest {
   onreadystatechange: ƒ, readyState: 4, timeout: 0