vue-cli 引入、配置axios的方法

一、npm 安装axios，文件根目录下安装，指令如下

npm install axios --save-dev 

二、修改原型链，在main.js中引入axios

import axios from 'axios' 

接着将axios改写为Vue的原型属性，

Vue.prototype.$http=axios 

这样之后就可在每个组件的methods中调用$http命令完成数据请求

三、在组件中使用

methods: {
   get(){
    this.$http({
     method:'get',
     url:'/url',
     data:{}
    }).then(function(res){
     console.log(res)
    }).catch(function(err){
     console.log(err)
    }) 

    this.$http.get('/url').then(function(res){
     console.log(res)
    }).catch(function(err){
     console.log(err)
    })
   }
}

有关axios的配置请参考如下文档，点击打开链接

下面给大家介绍下vue-cli配置axios的方法

1.

npm install axios --save

2.

npm install @type/axios --save-dev(使用ts编写的需要此声明文件，升级的axios好像不需要了，已经自带)

3.

在src目录下添加axios.ts文件，内容：

import axios from 'axios'
import {Notification} from 'element-ui'
import store from './store/index'
import buildconf from '../config/build.rootpath.js'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = buildconf.serverUrl
// axios.defaults.baseURL = 'http://gsblackwidow.chinacloudsites.cn/'
axios.interceptors.request.use(function(config) {
 // document.getElementById('g-loader').style.display = 'flex'
 store.commit('requestModify', 1)
 return config;
}, function(error){
 return Promise.reject(error)
})
axios.interceptors.response.use(function(response){
 store.commit('requestModify', -1)
 // document.getElementById('g-loader').style.display = 'none'
 return response.data;
}, function(error){
 store.commit('requestModify', -1)
 // document.getElementById('g-loader').style.display = 'none'
 if(error.response.status === 401){
  Notification({
   title: '权限无效',
   message: '您的用户信息已经失效, 请重新登录',
   type: 'warning',
   offset: 48
  });
  window.location.href = '/#/login'
 }else{
  Notification({
   title: '请求错误',
   message: `${error.response.status} \n ${error.config.url}`,
   type: 'error',
   offset: 48,
  })
 }
 return Promise.reject(error)
})
export default axios

4.

types文件夹中新建vue.d.ts文件，内容：

import {AxiosStatic, AxiosInstance } from 'axios'
declare module 'vue/types/vue' {
 interface Vue {
  $axios: AxiosStatic;
 }
}

这样就可以在各个模块中通过this.$axios来使用axios了

其中axios中：

1. build.rootpath.js内容：

var path = require('path')
var rootpath = path.resolve(__dirname, '../dist')
module.exports = rootpath

2. store是vuex的文件，所以要事先安装vuex

总结

以上所述是小编给大家介绍的vue-cli 引入、配置axios的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

    vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台. 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,看了教程,要自己在根目录建vue.config去配置,如果你用axios,关于代理的配置,如下: 在vue.config.js中配置: 以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 npm run dev 2.vue-cli 使用axios //1.先安装axios npm install axios //2.main.js中引入并放在Vue的原型上 import

  • vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

    vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati

  • vue-cli axios请求方式及跨域处理问题

    vue-cli axios请求方式以及跨域处理 安装axios cnpm install axios --save 在要使用axios的文件中引入axios main.js文件 :import axios from 'axois' 要发送请求的文件:import axios from 'axois' 在config/index.js文件设置代理 dev: { proxyTable: {// 输入/api 让其去访问http://localhost:3000/api '/api':{ target

  • 浅谈在Vue-cli里基于axios封装复用请求

    浅谈在Vue-cli里基于axios封装复用请求

    本文介绍了浅谈在Vue-cli里基于axios封装复用请求,分享给大家,具体如下: 安装 只用安装一个axios就可以了. npm install axios --save 接口代理设置 为了请求可以正常发送,我们一般要进行一个接口代理的配置,这样可以避免请求跨域,项目打包之后,后端一般也要搭建一个nginx之类的东西进行转发请求,不然请求会因为跨域问题失败的. //文件位置:config/index.js proxyTable: { '/api': { target: 'http://47.9

  • vue.js简单配置axios的方法详解

    前言 官方现在已经不再推荐用resource了,换了个axios,咱也不能落后,至少你得知道咋弄,面试的时候也好给面试官吹吹牛逼,废话不多说. 它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 配置方法 首先用npm安装 npm install --save axios vue-axios 安装完之后,在

  • vue-cli 引入、配置axios的方法

    一.npm 安装axios,文件根目录下安装,指令如下 npm install axios --save-dev  二.修改原型链,在main.js中引入axios import axios from 'axios'  接着将axios改写为Vue的原型属性, Vue.prototype.$http=axios  这样之后就可在每个组件的methods中调用$http命令完成数据请求 三.在组件中使用 methods: { get(){ this.$http({ method:'get', ur

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    目录 一.axios是什么 特性 基本使用 二.为什么要封装 三.如何封装 设置接口请求前缀 设置请求头与超时时间 封装请求方法 请求拦截器 响应拦截器 小结 参考文献 一.axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分

  • Vue cli 引入第三方JS和CSS的常用方法分享

    第一种方法: 直接在index.html中引入 js <script type="text/javascript" src="static/mui.min.js" ></script> css <link rel="stylesheet" href="static/mui.min.css" rel="external nofollow" /> 第二种 在单页面中用impo

  • vue项目引入字体.ttf的方法

    1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4.配置webpack.base.conf.js 文件 5.App.vue引入字体 6.可在body中设置字体

  • Vue中引入样式文件的方法

    一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

  • vue实现引入本地json的方法分析

    本文实例讲述了vue实现引入本地json的方法.分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.json' export default{ data(){ return{ userinform: '' } }, mounted(){ this.userinform = data } } test.json就是普通json格式就可以了!然后完美解决! 后台服务器请求json方式: this.$http.get('url').then(res

  • 基于vue配置axios的方法步骤

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading 项目中对请求的同一化

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

随机推荐