vue 网络请求 axios vue POST请求 vue GET请求（附源码）

最新推荐文章于 2024-01-26 16:41:09 发布

刺心疯

最新推荐文章于 2024-01-26 16:41:09 发布

阅读量347

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/qq_42363090/article/details/99943996

HTML5 专栏收录该内容

204 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成Axios和QS库，解决POST请求参数传递问题，通过步骤演示如何配置拦截器、使用原型链添加axios属性，并展示了GET和POST请求的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

完成

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

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