vue3 学習ノートにおける axios の使用の変更の概要

糸追加アクシオス
 
npm インストール axios
 
bower axios をインストール
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

「axios」からaxiosをインポートします
「vue」から{onMounted}をインポートします
エクスポートデフォルト{
 設定（）{
  マウント時(()=>{
   アクシオス({
    url:'https://xxxxxx.net/hj/mp/banner/l'
   })
  })
 }
}

モジュール.エクスポート={
 開発サーバー:{
  プロキシ：{
   '/api':{
    ターゲット: 'https://xxxxx.net',
    変更元:true、
    パス書き換え:{
     '^/api':''
    }
   }
  }
 }
}

axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json'
 アクシオス({
  url:'/hj/mp/banner/l'
})

'axios' から axios をインポートします
 
//グローバル設定 axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
//インターセプター axios.interceptors.request.use(config=>{
 設定を返す
},エラー=>{
 Promise.error(error) を返します
})
axios.interceptors.response.use(response=>{
 応答データを返す
},エラー=>{
 Promise.error(error) を返します
})
 
エクスポート関数 request(url='',params={},type='POST'){
 //URLパラメータ型のデフォルト値を設定する return new Promise((resolve,reject)=>{
  約束させる
  if(type.toUpperCase()==='GET'){
   プロミス = axios({
    URL、
    パラメータ
   })
  }そうでない場合(type.toUpperCase()=== 'POST'){
   プロミス = axios({
    メソッド:'POST',
    URL、
    データ:パラメータ
  })
  }
    //処理 return promise.then(res=>{
   解決する
  }).catch(エラー=>{
   拒否(エラー)
  })
 })
}
 
// 使用時にimport {request} from '../network/request.js'を呼び出す
エクスポートデフォルト{
 マウントされた(){
  リクエスト('/hj/mp/banner/l')。その後(res=>{
   コンソールログ(res);
  }).catch(エラー=>{
   コンソールログ(エラー);
  })
 }
}

'axios' から axios をインポートします
 
//グローバル設定 axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
エクスポート関数リクエスト(config){
 定数インスタンス = axios.create({
  タイムアウト:50000、
  メソッド:'post'
 })
 
  //リクエストインターセプション instace.interceptors.request.use(config=>{
  設定を返す
 },エラー=>{})
 //レスポンスインターセプション instace.interceptors.response.use(res=>{
  res.dataを返す
 },エラー=>{
  // エラー処理 })
 インスタンス(config)を返す
}
// 使用時にimport {request} from './request'を呼び出す
リクエスト（{
 url:'/hj/mp/banner/l',
}).then(res=>{
 コンソールログ(res);
}).catch(エラー=>{
 コンソールログ(エラー);
})

const app = createApp(App)
app.config.globalProperties.$http = リクエスト
app.mount('#app')

「vue」から{defineComponent、getCurrentInstance、onMounted}をインポートします。
デフォルトのdefineComponentをエクスポートする（{
 セットアップ(props,ctx){
  const { プロキシ } = getCurrentInstance()
  マウント時(()=>{
   console.log(プロキシ);
   proxy.$http('/hj/mp/banner/l').then(res=>{
    コンソールログ(res);
   })
  })
 }
})