vue-cli中axios请求接口的使用

vue-cli中axios请求接口安装和使用

一、npm 安装axios，文件根目录下安装，指令如下

npm install --save axios

二、在main.js中引入axios；接着将axios改写为Vue的原型属性(我一般会用$ajax来代替axios)

import axios from 'axios'
Vue.prototype.$ajax= axios      //我一般会用$ajax来代替axios
Vue.protoType.$http = axios; //也可以用$http来代替axios

三、在组件中使用(‘meadiaurl.url’是我封装的接口地址)

get请求

 this.$ajax.get(meadiaurl.url+'/FH_AM6/api/event/getEventList').then((res)=>{
          this.lists=res.data.data
          console.log(this.lists)
        }).catch((response)=>{
          console.log(response);
        })

get请求传参数

this.$ajax.get(meadiaurl.url + '/FH_AM6/api/theme/getThemeDetailByID',
            {
              params: {THEME_ID:this.theme_ID}  //参数放在params：{}里面
          }).then((res) => {
            let code = res.data.code;
            if(code ==200){
              this.lists = res.data;   
              this.END_TIME = res.data.data.END_TIME;
                console.log(this.lists)
            }
          }).catch((response)=>{
            console.log(response);
          })

post请求传参数(这里踩了个坑)

axios POST传参的问题，我需要在请求中传递参数，如果直接在地址后面写参数报400，报错信息是：传递的参数不存在
（1）安装qs模块

npm install qs -S

（2）在main.js中引入qs

import qs from ‘qs’
Vue.prototype.$qs = qs

用qs模块转递post的参数

this.$ajax.post(meadiaurl.url+'/FH_AM6/api/login/toLogin',
              this.$qs.stringify({  //使用qs模块传参
                USERNAME:this.name,
                PASSWORD:this.password
              })
       )
         .then((res)=>{
           let code = res.data.code
         //  console.log(res.data)
           if(code==200){
             this.$Message.success('登录成功');
             this.$router.push("/main/recommend/webmedia")
           }else {
             this.$Message.error('密码不正确');
           }
         }).catch(()=>{
         this.$Message.error('获取失败');
       })

以上就是vue-cli中使用axios全部内容