Vue Typescript下axiosのラッピングと使用

8 月になり、突然の機会が訪れ、荷物を持って一人で広州に行き、卒業した先輩との起業プロジェクトに参加しました。少し不安と興奮を抱えながら、学校を離れる第一歩を踏み出しました。

オフィスの一室に住んでいるため、外出するとすぐに仕事が始まり、毎日 5 時から 9 時まで働く生活が始まりました。夜は自分のプロジェクトに取り組み、夏のトレーニングキャンプの感覚が蘇ります。とても疲れていて充実しています。毎日髪の毛が抜け落ちているし、何を食べるかで悩んでいます。

自分で作った華広地図を自分の eo に送ったら、徴収されて、オンラインで星空の製品になり、さらに改善が求められました 😟
考えてみると、各地点のマーカーにクリックイベントを追加して、その場所の詳細な説明を表示できるようにしようと思いました。ただし、各場所には画像が必要で、ローカルに保存すると容量が大きくなり、カクつきが発生する可能性があるため、サーバーに保存することにしました。そのために、axios を再度確認し、オンラインのチュートリアルを参考にしてラッピングを作成し、クロスオリジンの問題も解決しました。

axios のラッピング#

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'

const showStatus = (status: number) => {
  let message = ''
  switch (status) {
    case 400:
      message = 'リクエストエラー(400)'
      break
    case 401:
      message = '認証されていません。再ログインしてください(401)'
      break
    case 403:
      message = 'アクセスが拒否されました(403)'
      break
    case 404:
      message = 'リクエストエラー(404)'
      break
    case 408:
      message = 'タイムアウト(408)'
      break
    case 500:
      message = 'サーバーエラー(500)'
      break
    case 501:
      message = 'サービスが実装されていません(501)'
      break
    case 502:
      message = 'ネットワークエラー(502)'
      break
    case 503:
      message = 'サービスが利用できません(503)'
      break
    case 504:
      message = 'タイムアウト(504)'
      break
    case 505:
      message = 'HTTPバージョンがサポートされていません(505)'
      break
    default:
      message = `接続エラー(${status})!`
  }
  return `${message}`
}

const service = axios.create({
  // 联调
  baseURL: 'https://www.wanandroid.com',
  headers: {
    get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  },
  // クロスオリジンリクエストを許可するかどうか
  withCredentials: true,
  timeout: 30000, //タイムアウト時間
  transformRequest: [(data) => {
    data = JSON.stringify(data)
    return data
  }],
  validateStatus () {
    // async-awaitを使用しているため、rejectの処理が煩雑になるため、すべてresolveを返し、ビジネスコードで例外を処理する
    return true
  },
  transformResponse: [(data) => {
    if (typeof data === 'string' && data.startsWith('{')) {
      data = JSON.parse(data)
    }
    return data
  }]
})

// リクエストインターセプター
service.interceptors.request.use((config: AxiosRequestConfig) => {
    return config
}, (error) => {
    // エラーをビジネスコードに渡す
    error.data = {}
    error.data.msg = 'サーバーエラー'
    return Promise.resolve(error)
})

// レスポンスインターセプター
service.interceptors.response.use((response: AxiosResponse) => {
    const status = response.status
    let msg = ''
    if (status < 200 || status >= 300) {
        // httpエラーを処理し、ビジネスコードに渡す
        msg = showStatus(status)
        if (typeof response.data === 'string') {
            response.data = {msg}
        } else {
            response.data.msg = msg
        }
    }
    return response
}, (error) => {
    // エラーをビジネスコードに渡す
    error.data = {}
    error.data.msg = 'タイムアウトまたはサーバーエラー'
    return Promise.resolve(error)
})

export default service

使用方法#

@Component
export default class Home extends Vue{
  a = []
  getSomeThings(){
    return request({
        url: "/wxarticle/list/408/1/json",
        method:'get'
    }).then((response)=>{
      this.a = response.data.data.datas
      console.log(this.a)
    }).catch((error)=>{
      console.log(error)
    })
  }

 mounted(){
   this.getSomeThings()
 }

クロスオリジン問題の解決#

以前に ajax でクロスオリジンについて学んだので、クロスオリジンとは、ブラウザの同一生成元ポリシーによって引き起こされるもので、JavaScript に対するセキュリティ対策です。

axios でのクロスオリジンの解決策#

他のサーバーからデータを取得するためには、プロキシサーバーを設定して、別のサーバーからデータを取得し、そのデータをプロキシサーバーに返し、プロキシサーバーがクライアントにデータを返すことで、クロスオリジンアクセスを実現できます。

プロキシの設定

vue.config.js で以下の内容を設定します。

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://www.wanandroid.com',// バックエンドのIP+ポートをリクエストする
                changeOrigin: true,// クロスオリジンを許可し、ローカルに仮想サーバーを作成し、リクエストデータを送信し、同時にリクエストデータを受け取ります。これにより、サーバー間のデータのやり取りがクロスオリジンの問題を引き起こさなくなります。
                ws: true,// WebSocketを有効にする
                pathRewrite: {
                    '^/api': '',// targetのアドレスに置き換える
                }
            }
        }
    }
}

baseURL の設定

axios のラッピングファイルで baseURL を '/api' に変更します。

const service = axios.create({
  baseURL: '/api',

  …………

})

上記の 2 つの手順は何を意味しているのでしょうか。実際には：

'/wxarticle/list/408/1/json' をリクエストすると、localhost:8080/api/wxarticle/list/408/1/json をリクエストしたことになります。
そして、設定したプロキシが /api を検知し、/api とその前のすべてを target の内容に置き換えます。
したがって、実際のリクエスト URL はhttps://www.wanandroid.com/wxarticle/list/408/1/json となります。
つまり、必要なインターフェースにリクエストが送信されます。

最後に#

だいたいわかったので、始めましょう。

学校の写真は？

え？ないよ

写真撮影の部分は？ 😧

彼らは... 一部しかいない... 😧

ああ... それは... 😩

以上のことから、プロジェクトは現在中断中です 💢