精华内容
下载资源
问答
  • vue安装axios
    千次阅读
    2020-05-15 10:25:27

    问题

      在使用npm install axios安装了axios,并在main.js中配置完成之后,启动Vue项目,访问页面为空白,查看页面元素,控制台报红TypeError: setting getter-only property "$axios",在参考某篇文章之后解决问题。

    解决

    1.安装

      vue-cli2和vue-cli3和4安装方法还不一样,我使用的是vue-cli4.3.1,应使用npm add axios,vue-cli2.0使用的是npm install axios

    2. 配置(我觉得这可能是主要问题,没有返回验证)

      在main.js中进行配置,不能使用‘’axios‘’字段命名,
    之前我是这么写的,页面是空白。

    import axios from 'axios'
    Vue.prototype.$axios = axios
    

    修改如下之后,完美运行,当然用到axios的地方也要改成$ajax。

    import axios from 'axios'
    Vue.prototype.$ajax = axios
    

    结束

      仅仅为了记录一下问题解决过程,防止以后再次遇到还要找解决方法,也同时为遇到相同问题的朋友提供方便,如有问题烦请指出,谢谢!

    参考文章连接:http://www.mamicode.com/info-detail-2627823.html

    更多相关内容
  • vue安装axios

    千次阅读 2022-08-04 08:44:46
    Vue使用axios

    1、安装

    npm install axios --save
    

    2、在main.js中写入一下代码

    import axios from 'axios'
    Vue.prototype.axios = axios
    

    3、调用

    下面源码是直接使用axios来调用后台的接口示例:

    this.axios({
      url: '',//请求地址
      method:'POST',//请求方法
      responseType: 'json',//返回值类型
      params: {
        arg1: "arg1"//请求携带参数
      }
    }).then(res => {
      console.log(res)//请求成功
    }).catch(error => {
      console.log(error);//请求失败
    })
    
    

    使用拦截器—添加

    在src创建util目录,在里面创建request.js文件

    import axios from 'axios';
    
    const service = axios.create({
    	baseURL: "http://127.0.0.1:8080/projectName",//请求地址前缀
    	timeout: 0
    });
    
    // 请求拦截器
    service.interceptors.request.use(
    	config => {
       //添加请求头部参数
    		config.headers['arg1'] = "arg1Value";
    		return config;
    	},
    	error => {
    		return Promise.reject(error);
    	}
    );
    
    // 响应拦截器
    service.interceptors.response.use(
    	response => {
    		//拦截到成功的数据
    	  	return response.data;
    	},
    	error => {
    		//拦截到失败的数据
    		return Promise.reject(error);
    	}
    );
    
    export default service;
    
    

    在src创建api目录,在里面创建user.js文件

    import request from '@/utils/request'; //引入request.js
    
    export function getUserInfo(data) {
    	return request({
    		url: 'userController/getUserInfo',
    		method: 'post',
    		data: data
    	});
    }
    

    4、Vue页面调用拦截器

    <template>
        <div>
            <h1>{{userInfo}}</h1>
        </div>
    </template>
    
    <script>
      	//引入api
    	import { getUserInfo } from './api/user.js';
        export default {
          date(){
            return{
            	userInfo: {}
            }
          },
          mounted(){
            const par = {arg1: "arg1Value"};
            //调用api
            getUserInfo(par).then(re=>{
            	//请求成功 返回re
                this.userInfo = re.data;
            }).catch(err=>{
               //请求失败
            })
          }
       }
    </script>
    
    展开全文
  • vue安装axios以及如何使用axios

    千次阅读 2021-11-25 17:08:36
    vue安装axios以及如何使用axios

    第一步 使用命令 npm install axios  (可以在node_modules文件里面找到axios文件就是安装成功了

     第二步 在main.js引入axios文件

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    //引入axios请求 并配置域名
    import axios from 'axios'
    
    // 创建 axios 实例
    const requests = axios.create({
      baseURL: 'https://www.ddd.com/', // 基础url,如果是多环境配置这样写,也可以像下面一行                            的写死。
      timeout: 6000 // 请求超时时间
    })
    
    //将axios挂载到vue实例上
    Vue.prototype.axios = requests
    

     第三步 使用axios

    export default {
      name: "Footer",
      data() {
        return {
          
        }
      },
      created() {
        this.ceshi()
      },
      methods: {
        ceshi(){
           //需要将axios挂载到vue实例上才可以这样使用,第二步有写,可参考
          this.axios({
            //完整的请求接口是https://www.ddd.com/solitaireMgr/solitaireAPI.do
            //这是因为第二步已经设置了每个请求前面都接上https://www.ddd.com/
            url:'solitaireMgr/solitaireAPI.do',
            method:'get',
            params:{
              userId:'981415' 
            }
          }).then((res) => {
            console.log("获取到的数据 res ==>",res);
          })
        }
      },
    }

    axios的拦截器

    // 请求拦截器(请求到服务器前会执行,可在里面执行业务代码)
    requests.interceptors.request.use(config => {
      
        console.log("请求拦截器 ==>",config);
        if(config.method == 'post'){
           console.log('这是还需要处理post请求的数据 ');
        }
        return config
      })
      
      // 接收拦截器(服务器返回回来的数据 给到前端前会触发,在里面执行业务代码)
      requests.interceptors.response.use((response) => {
        const res = response
        console.log("接收拦截器 ==>",response);
        return res
      })
      

    如果有什么不对或者不好的地方,请多多指教

    展开全文
  • 在使用axiosvue-axios时我们基本都会需要配置axios的拦截器,对axios的请求、响应进行二次封装,会多一道工作。在vue项目当中,可以使用。使用Vue的插件写法,更符合Vue整体生态环境。而直接写原型链,感觉有些...

    axios和vue-axios的关系/区别

    1、axios是基于promise的HTTP库,可以使用在浏览器和node.js中,它不是vue的第三方插件
    2、axios使用的时候不能像vue的插件(如:Vue-Router、VueX等)通过Vue.use()安装插件,需要在原型上进行绑定使用:Vue.prototype.$http = axios;
    3、vue-axiosaxios集成到Vue.js的小包装器,可以像插件一样安装使用:Vue.use(VueAxios, axios);

    axios和vue-axios的使用方式区别

    1、axios使用方式

    npm install --save axios
    
    # 在入口文件main.js中配置
    import Vue from 'vue'
    import axios from 'axios'
    Vue.prototype.$http = axios
    # 第三步:使用案例
    this.$http.get('/user?id=666').then((response) => {
      console.log(response.data)
    }).catch( (error) => {
        console.log(error);
    });
    

    2、vue-axios使用方式

    npm install --save vue-axios
    # 或者
    npm install --save axios vue-axios
    
    #在入口文件main.js中配置
    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
     
    Vue.use(VueAxios, axios)
    #第三步:使用方式有如下三种
    #方式1
    Vue.axios.get(api).then((response) => {
      console.log(response.data)
    })
    #方式2
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
    #方式3
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })
    

    axios和vue-axios的使用哪一种较好

    使用 Vue 的插件写法,更符合 Vue 整体生态环境。而直接写原型链,感觉有些粗暴了,除非是很底层的实现,否则不太推荐这样写了。因此,我们更推荐使用vue-axios插件的方式,不太推荐是直接使用axios的方式。

    vue-axios-plugin插件的使用

    在使用axios或vue-axios时我们基本都会需要配置axios的拦截器,对axios的请求、响应进行二次封装, 会多一道工作。作为一名程序员,切记不要重复造轮子。在vue项目当中,可以使用vue-axios-plugin插件。使用步骤如下:

    #第一步:首先通过 npm 安装
    npm install --save vue-axios-plugin
    #然后在main.js入口文件配置如下:
    mport Vue from 'Vue'
    import VueAxiosPlugin from 'vue-axios-plugin'
     
    Vue.use(VueAxiosPlugin, {
      // 第二步:请求拦截处理
      reqHandleFunc: config => config,
      reqErrorFunc: error => Promise.reject(error),
      // 响应拦截处理
      resHandleFunc: response => response,
      resErrorFunc: error => Promise.reject(error)
    })
    #第三步:使用案例
    #在 Vue 组件上添加了 $http 属性, 它默认提供 get 和 post 方法,使用如下
    this.$http.get(url, data, options).then((response) => {
      console.log(response)
    })
    this.$http.post(url, data, options).then((response) => {
      console.log(response)
    })
    #你也可以通过 this.$axios 来使用 axios 所有的 api 方法,比如:
    this.$axios.get(url, data, options).then((response) => {
      console.log(response)
    })
     
    this.$axios.post(url, data, options).then((response) => {
      console.log(response)
    })
    

    axios插件文档:http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html

    我的其他文章

    亲身分享 一次 字节跳动 真实面试经历和面试题

    展开全文
  • vue-axios-plugin 简体中文 | English axios plugin for Vuejs project How to install Script tag
  • vue-axios安装及四个常见方法

    千次阅读 2022-06-01 13:42:06
    vue中使用axios发起请求
  • vue 项目安装axios报错

    千次阅读 2022-03-10 22:33:51
    今天打算写一个vue项目模板,在安装axios时遇到了点坑,分享一下 问题: 使用 npm install axios -- save 报错 尝试: 1、使用 淘宝镜像 cnpm install axios -- save 可以安装成功,但是,在pages.json文件中会...
  • 主要介绍了在vueaxios设置timeout超时的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了VUE使用axios调用后台API接口的方法,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
  • VueCli 中安装 axios

    千次阅读 2020-12-12 23:54:00
    介绍 Vue安装 axios 的方法。
  • 今天,我在vue项目中安装axios依赖时,axios会自动安装到开发依赖中,这与我想的安装到运行依赖不符。 所以,怎么解决呢? 第一步:win+r 第二步:cmd 第三步:npm install axios --save 第四步:npm i axios -...
  • 怎么在Vue中使用和安装axios

    千次阅读 2022-04-17 21:27:47
    1.先安装axios 在小黑框内输入 npm install --save axios //进行安装下载 成功提示 2.在vue的 main.js中导入axios import axios from 'axios' Vue.prototype.axios = axios 3.如何请求的路径很多,而且...
  • Vueaxios简单配置

    2022-07-11 17:29:18
    vueaxios的引入与配置
  • vue3 axios安装及使用

    万次阅读 2021-10-27 10:29:23
    vue3 axios安装及使用 安装 使用npm安装 $ npm install axios 封装axios /* * @Author: Axios封装 * @Date: 2020-12-08 10:39:03 * @LastEditTime: 2021-10-22 11:34:08 * @LastEditors: Please set ...
  • vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的。 // `withCredentials` indicates whether or not cross-site Access-Control ...
  • vue安装axios

    2022-03-16 19:50:13
    在vue项目中输入npm install --save ...import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 组件中使用要引入import axios from 'axios'; 普通get传参 this.axios.get('list.json?id=18').then(a=>{ c
  • Vue项目中安装使用axios

    千次阅读 2022-03-14 14:25:58
    Vue.prototype.$axios = axios; 三、使用 向cgi-bin/login.cgi提交登录data数据。 注意: 提交的Content-Type要看后端以什么方式接收,然后以相应的方式提交,要不然后端收到的就是被转码的乱码。 data的格式按...
  • vue-axios安装

    千次阅读 2018-08-17 17:11:56
    vue-axios + axios 入坑基础安装 首先,有时候直接安装 axiosvuecil 会报错 先安装! npm install axios 然后! npm install --save axios vue-axios 配置模板(index.js) import Vue from 'vue' ...
  • 今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • (chrome环境)在做项目的时候,由于做大数据可视化界面,后台接口查询数据往往会比较久(上百万的数据量),导致vue项目axios请求超时timeout设置就比较大。开始设置超时未3分钟时没有问题(这里我设置超时弹窗了)...
  • 1. 安装axios 在项目下执行npm install axios。 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios...
  • Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 第二步:在webpack配置一下proxyTable(config之下的index.js) dev: { 加入以下 proxyTable: { '/api': { target: '...
  • 通过设置访问代理,解决vue axios 跨域访问问题
  • 主要介绍了VUE项目axios请求头更改Content-Type操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue项目中安装axios

    千次阅读 2020-05-24 14:57:18
    1.安装axios npm install axios -S 2.全局注册,在main.js中 引入 import axios from 'axios' , 注册Vue.prototype.$http = axios
  • 工作原理特性兼容性安装使用qs安装通常使用的两种形式 axios 什么是axiosAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 工作原理 axios为客户端提供了在客户端和服务器之间传输数据的功能...
  • npm安装命令输入后显示: Clear up some disk space and try again 解决方法: 删除node_module文件夹,package-lock.json文件,然后npm cache clean -f 安装成功:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 122,353
精华内容 48,941
关键字:

vue安装axios

友情链接: ISO-IEC-7816-4-2005.zip