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

完成

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

1.

给 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)