axiosラッピングapiインタフェース2

axios

npm install axios --save

utilフォルダにajax.jsファイルを作成します。

 import axios from 'axios'
 export default {
 install (Vue, option = {}) {
 const http = axios.create(option)
 Vue.http = http
 Vue.prototype.$http = http
 }
 }

main.js

 import Ajax from './utils/ajax'
 //パブリックインターフェイスを設定する
 Vue.use(Ajax, {
 baseURL: 'http://...84/' 
 timeout:6000
 })

、axiosのセットアップが完了したら、データのインターフェイスを取得する方法を書き込むには、apiフォルダにapi.jsファイルを作成する必要があり、ファイル内に書き込むには、具体的なコードは次のとおりです：

 import Vue from "vue";
 export default{
 //1すべてのリーダーボードの種類を取得する
 getRankType(){
 return Vue.http.get('/ranking/gender')
 },
 //2IDに基づいてリーダーボードを取得する
 getRankList(id){
 return Vue.http.get('/ranking/'+id)
 }
 }

使用

 1.  api.js
 import api from '@/api/api'
 2.インスタンス生成時にデータを取得する
 created () {
 api.getCategory().then(response => {
 this.category = response.data
 }).catch(err => {
 console.log(err)
 })
 }