Vue發(fā)送ajax請(qǐng)求方法介紹

更新時(shí)間：2022年01月23日 11:14:34 作者：累成一條狗

這篇文章介紹了Vue發(fā)送ajax請(qǐng)求的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、vue-resource

1、簡(jiǎn)介

一款vue插件，用于處理ajax請(qǐng)求，vue1.x時(shí)廣泛應(yīng)用，現(xiàn)不被維護(hù)。

2、使用流程

step1：安裝

【命令行輸入】
npm install vue-resource --save

step2：引入

【main.js】
// 引入vue-resource
import VueResource from 'vue-resource'

// 使用vue-resource
Vue.use(VueResource)

step3：編碼

【格式：】
this.$http.get().then()    返回的是一個(gè)Promise對(duì)象

step4：完整代碼

【使用vue-cli創(chuàng)建項(xiàng)目】
http://www.dhdzp.com/article/235498.htm

【main.js】
import Vue from 'vue'
import App from './App.vue'
// 引入vue-resource
import VueResource from 'vue-resource'

// 使用vue-resource
Vue.use(VueResource)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        <div v-if="!repositoryUrl">loading...</div>
        <div v-else>most star repository is <a :href="repositoryUrl" rel="external nofollow"  rel="external nofollow" >{{repositoryName}}</a></div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                repositoryUrl : '',
                repositoryName : ''
            }
        },
        
        mounted() {
            // 發(fā)ajax請(qǐng)求，用以獲取數(shù)據(jù)，此處地址意思是查詢 github中 vue 星數(shù)最高的項(xiàng)目
            const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
            this.$http.get(url).then(
                response => {
                    const result = response.data.items[0];
                    console.log(result)
                    this.repositoryUrl = result.html_url;
                    this.repositoryName = result.name;
                },

                response => {
                    alert('請(qǐng)求失敗');
                },
            );
        }
    }
</script>

<style>

</style>

step5：截圖：

請(qǐng)求正常

點(diǎn)擊鏈接跳轉(zhuǎn)

使用錯(cuò)誤的地址

彈出錯(cuò)誤提示框

二、axios

1、簡(jiǎn)介

一款vue庫(kù)，用于處理ajax請(qǐng)求，vue2.x時(shí)廣泛應(yīng)用。

2、流程

step1：安裝

【命令行輸入】
npm install axios --save

step2：引入

【在哪里使用，就在哪里引入】
import axios from 'axios';

step3：完整代碼

【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')



【App.vue】
<template>
    <div>
        <div v-if="!repositoryUrl">loading...</div>
        <div v-else>most star repository is <a :href="repositoryUrl" rel="external nofollow"  rel="external nofollow" >{{repositoryName}}</a></div>
    </div>
    <!--App -->
</template>

<script>
    import axios from 'axios';
    
    export default {
        data() {
            return {
                repositoryUrl : '',
                repositoryName : ''
            }
        },
        
        mounted() {
            // 發(fā)ajax請(qǐng)求，用以獲取數(shù)據(jù)，此處地址意思是查詢 github中 vue 星數(shù)最高的項(xiàng)目
            const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
            
            axios.get(url).then(
                response => {
                    const result = response.data.items[0];
                    console.log(result)
                    this.repositoryUrl = result.html_url;
                    this.repositoryName = result.name;
                }
            ).catch(
                response => {
                    alert('請(qǐng)求失敗');
                },
            );
        }
    }
</script>

<style>

</style>

step5：截圖與上面的 vue-resource 一樣，此處不重復(fù)截圖。