vue 网络请求 axios vue POST请求 vue GET请求(附源码)

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)});

完成

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


                    
                    

你可能感兴趣的:(HTML5)