应用在vue项目里的axios使用方法 桃扇骨 2021-06-24 15:59 458阅读 0赞 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的大致使用方法
还没有评论,来说两句吧...