[axios] Vue プロジェクトで axios をカプセル化して使用する

axios の基本的な使い方[axios] axios の基本的な使い方について説明する前に、実際の Vue プロジェクトでは、この方法は使用しません。当時はプロジェクトの標準化が実現しておらず、コンポーネントやモジュールが厳密に分けられておらず、すべてhtmlファイルに書かれていました.今、フロントエンドエンジニアリングの観点からaxiosの使用方法を検討する必要があります. .

ゼロ、準備作業

Vue プロジェクトがあり、App ルートコンポーネントに Left コンポーネントと Right コンポーネントが含まれ、Left コンポーネントにボタンがあり、クリック後に GET リクエストを送信するとします。Right コンポーネントにはボタンがあり、クリックすると POST リクエストを送信します。基本的なページ構造は次のとおりです。
ここに画像の説明を挿入

まず、 axios パッケージをインストールする必要があります。その後、プロジェクトで axios を使用できるようになります。ターミナルで実行してnpm i axios -Saxios をプロジェクトにインストールします。

1. リクエストを送信して使用する必要がある .vue コンポーネントに axios をインポートします。

左コンポーネントのスクリプトタグの内容:

<script>
// 导入axios模块
import axios from 'axios'

export default {
      
      
  data() {
      
      
    return {
      
      
      bookList: {
      
      }
    }
  },
  methods: {
      
      
  	// 点击事件
  	// <button @click="getInfo">发送GET请求</button>
    async getInfo() {
      
      
      const {
      
       data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
      console.log(res)
      // 一般把请求回来的数据转存到data中
      this.bookList = res
    }
  }
}
</script>

Right コンポーネントの script タグの内容:

<script>
// 导入axios模块
import axios from 'axios'

export default {
      
      
  methods: {
      
      
  	// 点击事件
  	// <button @click="postInfo">发送POST请求</button>
    async postInfo() {
      
      
      const {
      
       data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', {
      
       name: 'zs', age: 20 })
      console.log(res)
      // 不再演示数据转存到data的过程
    }
  }
}
</script>

ここに画像の説明を挿入
リクエストは成功する可能性がありますが、この方法の欠点は: axios を使用するたびに一度インポートする必要があることです..vue コンポーネントが axios を使用している限り、axios モジュールをインポートする必要があり、コンポーネントをインポートすることはできませんお互いに使用されます（普遍的ではありません）、ちょっと難しいです。そのため、axios をグローバルに利用できるようにしたいと考えています。

2. Axios を Vue プロトタイプにマウントし、リクエストのルートパスを構成します。

(1) axios をグローバルに利用できるようにするため、main.js ファイルで設定する必要があります。手順は次のとおりです。

axios モジュールをインポートする
Vue プロトタイプに axios をマウントします。

import Vue from 'vue'
import App from './App.vue'

// 1.导入axios模块
import axios from 'axios'

Vue.config.productionTip = false

// 2.将axios挂载到Vue原型上
Vue.prototype.$http = axios

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

[注意] axios が Vue プロトタイプにマウントされている場合、名前は任意です。これは、Vue プロトタイプに名前が付けられたプロパティ (メソッド) を$httpマウントしたことを意味し、その値はです。慣例により、このプロパティにはという名前を付けます。$httpaxios$http

(2) .vue コンポーネントインスタンスの呼び出しを簡素化するために、リクエストのルートパスを構成し、後で使用するときにルートパスの後の部分を渡すだけで済みます。

import Vue from 'vue'
import App from './App.vue'

// 1.导入axios模块
import axios from 'axios'

Vue.config.productionTip = false

// 3.配置请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 2.将axios挂载到Vue原型上
Vue.prototype.$http = axios

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

(3) コンポーネントでの使用方法:

axios モジュールをインポートする必要はなくなりました。インポートコードを直接削除するだけです。
Vue プロトタイプには Vue というプロパティが実装されているため、各 .vue コンポーネントは Vue インスタンスと見なすことができ$http、.vue コンポーネントは Vue インスタンスであるため、this.$httpaxios を取得することで通常どおり使用できます。
リクエストのルートパスが設定されているため、GET/POST リクエストの最初のパラメータをルートパスの後の部分に直接渡すことができます。

左コンポーネントのスクリプトタグの内容:

<script>
// 不再需要导入axios模块，直接删除导入代码
export default {
      
      
  data() {
      
      
    return {
      
      
      bookList: {
      
      }
    }
  },
  methods: {
      
      
    async getInfo() {
      
      
      const {
      
       data: res } = await this.$http.get('/api/getbooks')
      console.log(res)
      // 一般把请求回来的数据转存到data中
      this.bookList = res
    }
  }
}
</script>

Right コンポーネントの script タグの内容:

<script>
export default {
      
      
  methods: {
      
      
    async postInfo() {
      
      
      const {
      
       data: res } = await this.$http.post('/api/post', {
      
       name: 'zs', age: 20 })
      console.log(res)
      // 不再演示数据转存到data的过程
    }
  }
}
</script>

[短所]:データをリクエストするコードの再利用性が悪い. 異なるコンポーネントが同じデータをリクエストする必要がある場合、リクエスト関数はリクエストごとに 1 回記述する必要があります。

3. axios を取得するモジュールをカプセル化し、データを要求するための API をカプセル化します。

1. axios モジュールをカプセル化する

src ディレクトリと同じレベルで、使用するツールを示す utils フォルダーを作成し、その中にaxios をカプセル化するモジュールであるrequest.js ファイルを作成します。このルートパスを使用してデータを要求する必要がある人は、このモジュールをインポートする必要があります。

request.js ファイルの内容:

// 导入axios
import axios from 'axios'

// 通过axios.create方法创建一个axios实例，用request接收
const request = axios.create({
    
    
  // 指定请求的根路径
  baseURL: 'http://www.liulongbin.top:3006'
})

export default request

使用方法 (左コンポーネントを例にとります):

<script>
// 导入request模块
import request from '@/utils/request.js'

export default {
      
      
  data() {
      
      
    return {
      
      
      bookList: {
      
      }
    }
  },
  methods: {
      
      
    async getInfo() {
      
      
      // 假设需要传一个参数，这里的参数是假的，演示用
      const {
      
       data: res } = await request.get('/api/getbooks', {
      
      
        params: {
      
       id: 1 }
      })
      console.log(res)
      // 一般把请求回来的数据转存到data中
      this.bookList = res
    }
  }
}
</script>

[拡張]複数の axios モジュールを1 つのプロジェクトにカプセル化できます.複数のリクエストルートパスを使用する必要がある場合、各ルートパスは対応する axios モジュールをカプセル化し、各モジュールは互いに異なり、互いに影響しません.

しかし、現時点では、コードの再利用性が低いという問題はまだ解決されておらず、request 関数は繰り返し記述されます。この時点で、データをリクエストするためのコードを API モジュールにカプセル化します。

2. API モジュールのパッケージ化

src ディレクトリと同じレベルで、作成した api を表す api フォルダーを作成し、その中にbookAPI.js ファイルを作成します.これがパッケージ化された本モジュールです. 本に関するすべての API インターフェイスは、このモジュールにパッケージ化できます. この API インターフェイスを使用する必要がある人は、このモジュールをインポートする必要があります。

bookAPI.js ファイルの内容:

// 导入request模块
import request from '@/utils/request.js'

// 向外按需导出一个接口函数
export const getBookListAPI = function() {
    
    
  // 记得一定要把请求到的promise对象return出去
  return request.get('/api/getbooks', {
    
    
    // 假设需要传一个参数，这里的参数是假的，演示用
    params: {
    
     id: 1 }
  })
}

<script>
// 按需导入bookAPI
import {
      
       getBookListAPI } from '@/api/bookAPI.js'

export default {
      
      
  data() {
      
      
    return {
      
      
      bookList: {
      
      }
    }
  },
  methods: {
      
      
    async getInfo() {
      
      
      // 调用getBookListAPI请求数据
      const {
      
       data: res } = await getBookListAPI()
      console.log(res)
      // 一般把请求回来的数据转存到data中
      this.bookList = res
    }
  }
}
</script>

これにより、リクエストデータインターフェースのカプセル化が実現し、コードの再利用性が向上します。