Vue2.x axios发送post请求

Vue2.x axios发送post请求

    • 安装axios
    • 配置main.js
    • vue文件内 script代码
    • 演示图

安装axios

$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn:一般不使用
script src=“https://unpkg.com/axios/dist/axios.min.js”

配置main.js

以下代码为之前开发的项目中的配置代码 可供参考

	// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'
import ElementUI from 'element-ui'



Axios.defaults.headers.post['Content-Type']='application/json'
Vue.config.productionTip = false
Vue.prototype.$axios=Axios


//请求拦截器
Axios.interceptors.request.use(function(config){
	// if(config.method=='post'){
	// 	config.data=qs.stringify(config.data)
	// }
	return config;
},function(error){
	return Promise.reject(error);
});

//响应拦截器
Axios.interceptors.response.use(function(response){
	return response;
},function(error){
	return Promise.reject(error);
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
})

vue文件内 script代码


	export default {
		name: 'XXXXXXXXX',
		data() {
			return {
				params: {
    "columns": ["name", "agent",  "estimateTime", "actualTime", "timeoutLength"],
					"filter": { //过滤条件
						"timeoutAlarmType": {
							"eq": "enterTimeout"
						},
						"createTime": {
							"gt": "2018/11/21/00:00:00",
							"le": "2018/11/22/00:00:00"
						}
					},
					"table": "AlarmRecord"
				},
			}
		},
		components: {
		
		},
		created() {
			
			this.$axios.post("http://000.000.000.000:000/app/query", (this.params))
				.then(res => {
					this.company = res.data.data;//company可替换任意XX
					this.dealList = this.company;//为了分页
					console.log(res);
				})
				.catch(error => {
					console.log(error)
				});
		
		
		},
	
	}
	

演示图

Vue2.x axios发送post请求_第1张图片

你可能感兴趣的:(Vue2.x,JS)