vue.2x初学者必备——axios请求小结

原创于 2020-03-12 21:24:35 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue项目中全局配置Axios和QS库，实现HTTP请求的简化处理。通过在main.js中引入并绑定这两个库至Vue原型，使所有组件能直接调用，提供post和get请求的示例代码。

1、先安装axios（以下安装都为npm安装）

npm install axios

在main.js里把axios重新赋值给Vue,如下：

import axios from 'axios';
Vue.prototype.$axios = axios;

2、安装qs

npm install qs

同样的把qs重新赋值给Vue，如下：

import Qs from 'qs';
Vue.prototype.$qs = Qs;

这样，axios和qs就可以全局使用了，下面是我的一个demo：

3、post请求

var postdata = this.$qs.stringify({
    name:'lucy',
    password:'123456'
});
this.$axios.post(this.$baseAPI+'test.php',postdata).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error);
});

4、get请求

var postdata = 'name=lucy&password=123456';
this.$axios.get(this.$baseAPI+'test.php?'+postdata).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error);
});

希望能帮到初学vue.2x的小伙伴~