Vue2中使用axios的3種方法實例總結(jié)

更新時間：2022年09月22日 09:55:45 作者：小楊來談

axios從功能上來說就是主要用于我們前端向后端發(fā)送請求,是基于http客戶端的promise,面向瀏覽器和nodejs,下面這篇文章主要給大家介紹了關(guān)于Vue2中使用axios的3種方法,需要的朋友可以參考下

第一種原始方法直接在項目中使用(不建議使用)

這種方法最簡單粗暴

優(yōu)點：不需要做封裝，不需要做配置傻瓜式操作，不需要做異步處理

缺點：代碼太繁瑣，當(dāng)遇到請求過多的時候，這樣寫不適合讀寫

注意：如果你封裝的請求有問題解決不掉，可以用這種最原始的方式來解決

<template>
  <div>{{data}}</div>
</template>
 
<script>
/* 第一步下載 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
/* 第二步引入axios */
import axios from 'axios'
export default {
  data() {
    return {
        data:""
    };
  },
  methods: {
      /* 第三步 寫一個name事件  */
    name() {
      axios({
        method: "get",
        url: "http://yufei.shop:3000/tabbar",
      }).then(res=>{
          this.data = res.data /* 將拿到的值，賦值給data */
      })
    },
  },
  /* 第四步 在create鉤子函數(shù)中 將name事件在頁面出現(xiàn)的時候執(zhí)行 */
  created() {
    this.name();
  },
};
</script>

第二種將請求掛載到全局( 推薦使用 )

優(yōu)點：代碼量減少，代碼清晰，掛載到全局多處可以使用

缺點：vue3中不能這么使用，vue3換了一種方法來掛在全局

在main.js中

// 引入 axios
import axios from 'axios'
 
// 掛載一個自定義屬性$http
Vue.prototype.$http = axios
// 全局配置axios請求根路徑(axios.默認配置.請求根路徑)
axios.defaults.baseURL = 'http://yufei.shop:3000'

在App.js中

<template>
  <div>{{ data }}</div>
</template>
 
<script>
export default {
  data() {
    return {
        data:""
    };
  },
  methods:{
     async name() {  //async  await  是解決異步的一種方案，必須要加，但是原生封裝就不用
          const {data:res} = await this.$http.get('/tabbar')
          this.data = res
      }
  },
  created(){
      this.name()
  }
};
</script>

第三種將代碼進行封裝

優(yōu)點：代碼量減少，代碼清晰，掛載到全局多處可以使用，可以多層封裝，vue3也可以這么使用

我們在src文件夾種創(chuàng)建一個文件叫APi ，然后在APi當(dāng)前文件夾下創(chuàng)建一個request.js文件

目錄結(jié)構(gòu)如下

request.js代碼如下

// 引入 axios
import axios from 'axios'
// 封裝 baseURL
const request = axios.create({
    baseURL:"http://yufei.shop:3000"
})
// 向外暴露 request
export default request;

組件APP.vue代碼如下

<template>
  <div>{{ data }}</div>
</template>
 
<script>
// 1. 導(dǎo)入request
import request from '@/APi/request.js'
export default {
  data() {
    return {
        data:""
    };
  },
 
  methods:{
    //    事件name
     async name() {
         const res = await request.get('/tabbar')
         this.data  = res.data
      }
  },
//   生命周期函數(shù)created中調(diào)用 事件name 
  created(){
      this.name()
  }
};
</script>