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全部內容