vue -- axios安装 调取数据方法实例介绍

vue axios进阶–以面向对象的思维 对 vue axios 进行封装

安装axois

进入项目目录文件，进入cmd命令：npm install axios --save

axios简单使用

<script> import axios from 'axios' export default { name: 'App', methods:{ test(){ axios.get().then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } } } </script> 

axios初步进阶

在main.js中引入

将axios挂载到Vue原型中

import Vue from 'vue' import App from './App' import axios from 'axios' Vue.prototype.$axios=axios
Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' }) 

get请求

this.$axios.get('请求地址') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 

post请求

需要main.js中引入qs

import qs from 'querystring' Vue.prototype.qs=qs 

//此处注意，参数必须转化成字符串 this.$axios.post("http://localhost:8888/dologin",this.qs.stringify({ username:"hello", userpass:"123456" })).then(response=>{ console.log(response); }).catch(error=>{ console.log(error); }); 

解决跨越问题

proxyTable: { //"/代理地址" "/houduan": { //被代理地址 target: "http://localhost:8080/chatroom/", pathRewrite: { //^/代理地址 '^/houduan': '' }, changeOrigin: true } }, 

本文地址：https://blog.csdn.net/xiaozhezhe0470/article/details/108995720