应用在vue项目里的axios使用方法
1.首先要安装axios,在你项目目录下安装axios。在命令行里输入:npm install axios;2.然后要在main.js的入口文件里引入以下代码;import axios from 'axios'axios.defaults.baseURL = url;//这里写上自己的基础url,例如www.csdn.comVue.prototype.$axios = axi...
·
1.首先要安装axios,在你项目目录下安装axios。在命令行里输入:npm install axios;
2.然后要在main.js的入口文件里引入以下代码;
import axios from 'axios'
axios.defaults.baseURL = url;//这里写上自己的基础url,例如www.csdn.com
Vue.prototype.$axios = axios;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
import qs from 'qs';
Vue.prototype.qs = qs;
3.新增一个请求数据必须携带的参数token(这步是非必须的,按照自己的项目需求来),这个token表示的是用户加密后的id;
//请求的拦截器
axios.interceptors.request.use(function (config) {
const token = token //设置统一参数,这个token的值要在cookie里面取
if(config.method === 'post') {
let data = qs.parse(config.data)
config.data = qs.stringify({
uid: uid,
...data
})
} else if(config.method === 'get') {
config.params = {
uid: uid,
...config.params
}
}
return config;
}, function (error) {
return Promise.reject(error);
})
4.在组件中使用axios请求数据。
mounted() {
// get请求
this.$axios({
method: "get",
url: url,// 这里填写请求数据的路径
params: {// 这里填写请求数据的参数
user_id: 1,//这里如果设置了统一参数token,那么这里就不必再填写user_id
...
}
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})
// post请求
this.$axios({
method: "post",
url: url,
data: this.qs.stringify({
user_id: 1,
...
})
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})
},
5.另外的方法就是直接在你的文件中引入:
<script src='js/axios.min.js'></script>
<script src='js/qs.min.js'></script>
当然了,如果使用的是vue框架的话,那么除了自己搭建vue开发环境这种方式外,也可以直接在你的文件中引入:
<script src='js/vue.js'></script>
一切的前提是,你已经把所需要的文件都已经下载好,放进js这个文件夹了。
6.那么该怎么使用呢?跟上面的很类似,get请求:
axios({
method: "get",
url: url,//你访问的路径,即接口
params: {
userid: this.userid,
nickname: this.nickname
...
}
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})
post请求(与get请求不一样,仔细看data部分):
axios({
method: "post",
url: url,
data: Qs.stringify({
userid: this.userid,
nickname: this.nickname
})
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})
7.以上就是axios的大致使用方法
更多推荐
已为社区贡献7条内容
所有评论(0)