vue项目中axios使用详解

axios在项目中(vue)的使用

没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~

如果开发遇到跨域问题可以参考：http://www.jb51.net/article/134571.htm

安装axios到项目中

npm install axios --save

配置wepack别名，不同环境访问不同的配置接口

配置：

使用：import config from 'config'

封装一个axios实例

新建fetch.js,在此创建axios实例与过滤器

若配置了代理。则config.apiBaseUrl则配置代理的前缀即可

import config from 'config'
import axios from 'axios'
// import qs from 'qs';

const instance = axios.create({
 baseURL: config.apiBaseUrl, // api的base_url
 timeout: 10000,    // 请求超时时间
 // transformRequest: data => qs.stringify(data)
});

axios默认提交格式为：application/json，转换后提交格式为application/x-www-form-urlencoded

在asp.net core中，需要在action方法上添加[FromBody]接收json格式的数据，正常的都是application/x-www-form-urlencoded故有此修改。

按照使用需要安装qs到项目中,可转换数据格式类型

npm install qs --save

使用qs转换请求对比图

给实例添加拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 return config;
 }, function (error) {
 // 对请求错误做些什么
 return Promise.reject(error);
 });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
 // 对响应数据做点什么
 return response;
}, function (error) {
 // 对响应错误做点什么
 return Promise.reject(error);
});
 // 最后暴露实例
export default instance

实例的调用

若配置了express代理，请求路径为：浏览器->express开发服务器-----发送请求---->接口服务器

import fetch from 'fetch.js'
//get
fetch({
 url:'/home/data',//完整的请求路径为fetch.js配置的baseURL+/home/data?pageIndex=1
 method:'GET',
 params:{pageIndex:1}
})
//post
fetch({
 baseURL:'/api/v1',//完整的请求路径为/api/v1/home/save
 url:'/home/save',
 method:'POST',
 data:{id:1}
})

以上就是本次分享的关于vue项目中axios使用的全部内容，感谢你对我们的支持。

您可能感兴趣的文章:

  • 在vue中通过axios异步使用echarts的方法
  • 关于axios不能使用Vue.use()浅析
  • vue+vuex+axios+echarts画一个动态更新的中国地图的方法
  • vue.js简单配置axios的方法详解
  • VueJs 搭建Axios接口请求工具
  • 基于vue配置axios的方法步骤
  • 浅谈在Vue-cli里基于axios封装复用请求
  • vue项目中使用axios上传图片等文件操作
  • Vue2.0 axios前后端登陆拦截器(实例讲解)
  • vue2.0设置proxyTable使用axios进行跨域请求的方法
  • vue使用axios跨域请求数据问题详解
  • vue中axios处理http发送请求的示例（Post和get）
  • vue axios同步请求解决方案
  • 详解vue axios中文文档
赞 (0)

相关推荐

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • VueJs 搭建Axios接口请求工具

    VueJs 搭建Axios接口请求工具

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 上一章,我们认识了项目的目录结构,以及对项目的目录结构做了一些调整,已经能把项目重新跑起来了.今天我们来搭建api接口调用工具Axios.Vue本身是

  • Vue2.0 axios前后端登陆拦截器(实例讲解)

    Vue2.0 axios前后端登陆拦截器(实例讲解)

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐使用axios.前段时间第一次在项目里用到vue,关于登陆问题,这里写一下心得. 首先后端: import org.springframework.web.servlet.handler.HandlerInterceptorAdapter; import com.lovnx.gateway.po.User; import javax.servlet.http.HttpServletRequest; import jav

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

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

  • vue使用axios跨域请求数据问题详解

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

  • vue中axios处理http发送请求的示例（Post和get）

    vue中axios处理http发送请求的示例（Post和get）

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • 在vue中通过axios异步使用echarts的方法

    在vue中通过axios异步使用echarts的方法

    现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js

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

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

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

  • 关于axios不能使用Vue.use()浅析

    关于axios不能使用Vue.use()浅析

    前言 最近在学习axios,在使用过程遇到了一些问题,觉着有必要给大家分享下,关于axios的基本知识大家可以参考这篇文章:axios基本入门用法教程 ,下面话不多说了,来一起看看详细的介绍吧. 问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter) . Vue.use(MintUI) .但是用 axios时,就不需要用 Vue.use(axios) ,就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什

  • vue2.0设置proxyTable使用axios进行跨域请求的方法

    vue2.0设置proxyTable使用axios进行跨域请求的方法

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入 用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的

  • vue+vuex+axios+echarts画一个动态更新的中国地图的方法

    vue+vuex+axios+echarts画一个动态更新的中国地图的方法

    本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save

  • 详解vue axios中文文档

    axios中文文档 在用Vue做开发的时候,官方推荐的前后端通信插件是axios,Github上axios的文档虽然详细,但是却是英文版.现在发现有个axios的中文文档,于是就转载过来了! 原文地址 : https://github.com/mzabriskie/axios 简介 版本:v0.16.1 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请

  • vue axios同步请求解决方案

    vue axios同步请求解决方案

    在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'

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

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

随机推荐