vue-cli 使用axios的操作方法及整合axios的多种方法

1.创建vue脚手架

vue init webpack demo

2.cd 项目根目录，再安装axios

npm install axios -S

3.在main.js中

//把axios赋值到vue的原型上，方便调用
Vue.prototype.$http = axios

4.在调用处

methods:{
  axiosGet(){
  let that = this;
  that.$http.post('http://xxx.168.xx.220:5678/api/user/login',{
  "UserAccount": "string",
   "UserPassword": "string"
  }).then(function(response){
  console.log(response);
  }).catch(function(error){
  console.log(error);
  })
  }
 }

5.可以在main.js中做一些配置

import qs from 'qs'
Vue.prototype.$http = axios
.create({
 baseURL:'http://192.xx.10.xx:5678/api',
    //请求前处理数据
 transformRequest:[function(data){
 console.log(data);
 data=qs.stringify(data);
 return data;
 }],
    //请求等待超时时间则中断
 timeout: 1500,
    //请求后的data处理
 transformResponse: [function (data) {
 console.log(data);
        return data;
    }]
})

6.配置后可以在调用处省略一些代码

that.$http({
 method: 'post',
    //这里的路径是和main.js中的baseURL拼接而来的
 url: '/user/login',
 data: {
  "UserAccount": "string",
  "UserPassword": "string"
    }
 })
 .then(function(response){
   console.log(response);
 }).catch(function(error){
   console.log(error);
 })

补充：vue-cli整合axios的几种方法

Vue这个框架现在在单页面应用方面非常受人欢迎。

基于vue-cli创建的项目怎么样才能更好地处理网络请求？

首选的应该就是axios了

这次给刚接触vue的新手介绍一下axios在vue中如何使用

安装的话自己去官网看

一、不推荐的方法

//在要使用网络请求的组件中导入axios
import axios from 'axios'
export default {
 name: 'HelloWorld',
 data () {
  return {
   params:{}
  }
 },
 methods: {
//在这里调用网络请求
  request(){
   axios.get(`url${this.params}`).then(result=>{
    console.log(result)
  })
  }
 }
}

这种方法比较麻瓜哪个文件要用就  import axios from 'axios' ，但是太过繁琐，也不利于维护。

二、网络请求较少

//打开main.js全局导入axios
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
//存在prototype中
Vue.prototype.$http = axios
//需要使用axios的其他组件调用时可以通过两种方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//但是这样使用会出现一个问题，在单独的js文件中这样做调用不了$http,原因是没有Vue的实例。大多数情况下用这种方法就可以满足大部分需求了
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

三、推荐方法

用方法二已经可以满足大部分需求了，写的时候也比较爽，但是后期如果接口改变，还要一个个去查找修改，会显得很杂乱

这里推荐一种自己平时的做法

//新建一个JS命名为api
import axios from 'axios'
//在api中导入axios
let base = '/v1'
//把整个项目的网络请求都写在这个文件中用export导出
export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }
//这样写方便管理整个项目的网络请求
//在我们要是用这个请求时比如说getproduct
import {
  getproduct
 }from '../api/api';
export default {
 name: 'HelloWorld',
 data () {
  return {
   params:{}
  }
 },
 methods: {
  getProductList(){
   getproduct(this.params).then(result=>{
    console.log(result);
   })
  }
 }
}
//注意我们导出的时候用的是export 所以导入的时候必须带{}

总结

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

赞 (0)

相关推荐

  • 详解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的方法

    一.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-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-cli 使用axios的操作方法及整合axios的多种方法

    1.创建vue脚手架 vue init webpack demo 2.cd 项目根目录,再安装axios npm install axios -S 3.在main.js中 //把axios赋值到vue的原型上,方便调用 Vue.prototype.$http = axios 4.在调用处 methods:{ axiosGet(){ let that = this; that.$http.post('http://xxx.168.xx.220:5678/api/user/login',{ "Use

  • Vue开发中整合axios的文件整理

    前言 大家在vue日常开发中,不可避免要整合axios,这里简单记录一下整合中的文件,方便以后使用查找.下面来看看详细的介绍. 整合方法 整合文件axios.js import axios from 'axios'; // 适配vue-resource const instance = axios.create(); instance.interceptors.request.use(config=> { //Serialize.decode(config); return config; })

  • 详解Vue整合axios的实例代码

    在vue开发中,不可避免要整合axios,简单记录一下整合中的文件,方便以后使用查找. 整合文件axios.js import axios from 'axios'; // 适配vue-resource const instance = axios.create(); instance.interceptors.request.use(config=> { //Serialize.decode(config); return config; }); instance.interceptors.r

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    目录 1.首先axios不支持vue.use()方式声明使用 2.小小的提一下vue cli脚手架 3.axios发送get post请求问题 4.axios拦截器的使用 1.首先axios不支持vue.use()方式声明使用 看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的

  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    目录 1.首先axios不支持vue.use()方式声明使用 2.小小的提一下vue cli脚手架 3.axios发送get post请求问题 4.axios拦截器的使用 1.首先axios不支持vue.use()方式声明使用 看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的

  • vue/cli 配置动态代理无需重启服务的操作方法

    vue/cli 配置动态代理无需重启服务的操作方法

    vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板. vue/cli 配置动态代理,无需重启服务 devServe = http://localhost:3000; prodServe = http://localhost:4000; 1. 在vue.config.js文件中,配置代理服务 使用vue/cli@5创建的项目,默认会创建vue.config.js文件,如果项目中没有此文件,那

  • Vue Cli 3项目使用融云IM实现聊天功能的方法

    介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用

  • 一篇文章，教你学会Vue CLI 插件开发

    一篇文章，教你学会Vue CLI 插件开发

    前言 如果你正在使用Vue框架,那么你肯定知道Vue CLI是什么.Vue-cli 3,它是Vue.js 开发的标准工具(脚手架),提供项目支架和原型设计. 除了日常构建打包项目,Vue CLI3 的一个重要部分是cli-plugins,插件开发. 本文将教你如何科学的创建一个Vue-CLI 插件,以及项目独立npm包. 1. 什么是CLI plugin 它可以修改内部webpack配置并将命令注入到vue-cli-service.一个很好的例子是@vue/cli-plugin-typescri

  • 详解Vue CLI 3.0脚手架如何mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率. 因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cl

随机推荐