1. 程式人生 > 實用技巧 >vue-resource

vue-resource

  1. 下載npm i vue-resource
  2. main.js中引入使用:
import VueResource from 'vue-resource'
Vue.use(VueResource);

.vue檔案中使用:

get請求:

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    // console.log(this.$http);
    this.$http.get('http://localhost:8506/login?a=1').then((res)=>{
      console.log(res.data);
    }).catch(()=>{
      console.log('失敗了')
    })
  }
}

post請求:

		methods:{
			login:function(){
				//console.log(this.$http)
				this.$http.post('http://localhost:2133/getPost',{
					user:this.user,
					pass:this.password
				},{
					emulateJSON:true
				}).then(function(data){
					//console.log(data)
					if(data.data.ok == 1){
						alert(data.data.msg)
					}
					else{
						alert('失敗了')
					}
				}).catch(function(){
					alert('比較大的問題')
				})
			}
		}

注意:post請求中添加了emulateJSON:true 相當於ajax中的 application/x-www-form-urlencodedContent-Type 告訴後臺要傳輸的資料型別,即:請求命令列