vue 网络请求 axios vue POST请求 vue GET请求代码示例

QQ技术交流群 173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票

1.安装 axios 和 vue-axios 和 qs （qs是为了解决post默认使用的是x-www-from-urlencoded 请求，导致请求参数无法传递到后台）

$ npm install --save axios vue-axios qs

2.在 main.js 中引入 axios 和 qs

import axios from 'axios';
import qs from 'qs';

3.在 main.js 中把qs配置到axios

// http请求拦截器 请求之前的一些操作
axios.interceptors.request.use(config => {if(config.method=='post'){config.data=qs.stringify(config.data);//防止post请求参数无法传到后台}return config
}, error => {return Promise.reject(error)
});

4.在 main.js 中使用原型链继承，给VUE添加属性 axios

Vue.prototype.$axios = axios;

5.网络请求 get

var url ="/getProductInfo.do?userId=123";
this.$axios.get(url).then(res => {console.log(res)});

6.网络请求 post

var url ="/getProductInfo.do";
var data = { session, areaId };
this.$axios.post(url, data).then(res => {console.log(res)});

完成

番外：(可以看可以不看)

给 axios 拦截器中的传输数据添加参数

// http请求拦截器 请求之前的一些操作
axios.interceptors.request.use(config => {if (config.url.indexOf('https') == -1) {config.url = comm.httpUrl + config.url}if (config.method == 'post') {config.data.session= "20190904175901546091d34ab9e1e4572b3e2889979232d51";console.log(config.url,'session-post',config.data)config.data = qs.stringify(config.data);} else if (config.method == 'get') {config.params.session= "20190904175901546091d34ab9e1e4572b3e2889979232d51";console.log(config.url,'session-get',config.params)}return config
}, error => {return Promise.reject(error)
});

2.简单的封装使用

<script>
var that,axios;
export default {data() {return {login_status : false};},mounted() {that=this;axios=this.$axios;this.getData(); // 页面list列表数据},methods:{getData(){axios.post('/login.do',{code:'123'}).then(res=>{that.login_status = true;})}}

vue 把一个网络请求返回的结果封装成一个变量

_this.prototype.getJsSdkConfig= ()=>{var url = "/v1/api/getJsSdkConfig.do";var data = { url:window.location.href};_this.prototype.$axios.post(url, data).then(res => {return res;}).catch(error => {return error;});};        var jsSdkConfig = _this.prototype.getJsSdkConfig();console.log(jsSdkConfig)

vue 网络请求 axios vue POST请求 vue GET请求代码示例相关推荐

Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
vue 三、Axios (ajax 框架) 在vue 项目中的使用
前篇:ajax 与 axios的区别刚刚接触axios有好多疑惑.它和ajax有什么关系呢和区别呢?接下来一起看下: 1.区别 axios是通过promise实现对ajax技术的一种封装,就像jQu ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
008：vue+openlayers加载6种形式google地图（代码示例）
第008个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中添加谷歌地图,体现了多种的形式. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 ...
混合密度网络（MDN）进行多元回归详解和代码示例
来源:Deephub Imba 本文约4900字,建议阅读5分钟在本文中,首先简要解释一下混合密度网络 MDN (Mixture Density Network)是什么,然后将使用Python 代 ...
【Vue】Vue入门 -（本地篇+网络篇）代码示例及运行效果
一.Vue 可参考:Vue官方文档 Vue 将 DOM 元素看作是对象,可以将元素与Vue实例绑定,实现通过操作数据改变元素内容.不需要用 jQuery 手写各种各样的选择器了. 二.本地篇:Vue基 ...
Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）
一.Axios 1.定义:利用ES6提供的Promise方式,把AJAX进行了封装.我们在Vue中发送网络请求,基本上就是使用Axios 需要安装第三方的Axios模块,才能使用 ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
VUE.JS 使用axios数据请求时数据绑定时报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...
data里面做了定义在方法里面进行赋值用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property 'listgrou ...

vue 网络请求 axios vue POST请求 vue GET请求代码示例

QQ技术交流群 173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票

vue 网络请求 axios vue POST请求 vue GET请求代码示例相关推荐

最新文章

热门文章

vue 网络请求 axios vue POST请求 vue GET请求 代码示例

QQ技术交流群 173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票

vue 网络请求 axios vue POST请求 vue GET请求 代码示例相关推荐

最新文章

热门文章

vue 网络请求 axios vue POST请求 vue GET请求代码示例

vue 网络请求 axios vue POST请求 vue GET请求代码示例相关推荐