Vue2.0学习——axios用法详解2引入本地json数据(axios和vue-axios)

最新推荐文章于 2024-10-08 23:02:57 发布

啦啦啦987321

最新推荐文章于 2024-10-08 23:02:57 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue知识要点文章标签： vue axios vue-axios 前端

本文链接：https://blog.youkuaiyun.com/qq_36575992/article/details/80363570

本文介绍了如何在Vue2.0中使用axios和vue-axios来请求本地JSON数据。通过在main.js中注册axios为全局函数，并将.json文件置于static文件夹，确保打包时不处理，使得组件能便捷地访问数据。同时，文章探讨了vue-axios的作用，指出其能更规范地将axios绑定到Vue的原型链上，方便团队协作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面对爱可信有了一个全面的介绍，下面结合实例说一下axios和vue-axios，以及如何用axios请求本地json数据。

首先看一下将axios注册成全局函数的用法：main.js

import axios from 'axios'

Vue.prototype.axios = axios

添加一个全局函数，然后在相应的.vue文件中使用

defaultData(){  
  this.axios.get('本地的json文件地址', {  
  }).then(function (response) {  
      // 将接收到的数据传递到data的数据中
  }).catch(function (response) {  
      console.log(response);  
  }); 
}

这样组件就可以引用本地的数据了，需要说明的时.json 文件最好放在static文件夹中，这个文件夹中的文件在打包的时候是不会进行压缩和处理的。

那么vue-axios的作用是什么？

相信很多人都有这样的疑问了，一起来看一下vue-axios的源码：

index.js

(function () {

/**
 * Install plugin
 * @param Vue
 * @param axios
 */

function plugin(Vue, axios) {

  if (plugin.installed) {
    return
  }
  plugin.installed = true

  if (!axios) {
    co