APIデバッグのいくつかの問題の解決策

新しいチームに入り、新しいプロジェクトを始め、フロントエンド用のvueファミリーバケツ.先日インタフェースのデバッグを開始しましたが、いくつかの問題に遭遇しました.ここでMarkと共有します.
Postmanテストインタフェースの使用
インタフェースのドッキング中に問題が発生した場合は、インタフェーステストツールを使用して、問題がフロントエンドにあるかバックエンドにあるかを確認してから、より近い処理を行うことができます.私はここでずっとPostmanを使っています.もし他の良いインタフェーステストツールがあれば、提出してください.みんな使ってみてください.完全なインタフェース開発環境.バックエンドインタフェースが正常かどうかをテストするのに最適です.もちろん他にも高い使い方がありますが、私はしばらく体験したことがありません.具体的な使用:PostManを使用して自動化テストを行う.データが正常に戻らない場合は、堂々とバックエンドを探しに行きます(もちろん、ちゃんと話してください).
proxyTable構成エージェント
前後端が分離されることは、前後端のプロジェクトが同じディレクトリやサービスの下にないことを意味し、ドメインをまたぐことを意味します. vue-cliはwebpackテンプレートを使用して生成されたプロジェクトで、自動的にwebpack-dev-server依存パッケージを追加し、proxyオプションでエージェントを構成し、ドメイン間の問題を解決します.プロジェクトファイルのディレクトリ下のconfigファイルに基づくindex.jsのdev構成項目にはproxyTableがエージェント構成できます.  proxyはインタフェースをエージェントするだけで、置換するのではないので、ブラウザで見られるのはエージェント前のインタフェースアドレスで、エージェント後のアドレスではありません.したがって、エージェントが正しく構成されていないことをどのように知るかは、本当に問題です.次の例を示します.

proxyTable: {
    '/apis': { //  https://www.exaple.com   /apis
        target: 'https://www.exaple.com', //    
        changeOrigin: true, //     ,true   
        pathRewrite: {
            '^/apis': '' //  /apis    ,
        }
    }
}
//     ， '/apis'         ，   https://www.exaple.com
//  /apis          ，    。
//   ，           ：/apis/getUserInfo
//     ：https://www.exaple.com/getUserInfo

具体的なプロジェクトでどのように使用するかは、いくつかの例を参照してください.

//                 
//           ：192.168.1.110/api/a,192.168.1.110/api/b,192.168.1.110/api/c,
//     api   ， 
proxyTable: {
    '/api': { 
        target: '192.168.1.110', //    
        changeOrigin: true
    }
}
//         ：/api/a，/api/b，/api/c


//                
//           ：192.168.1.110/a,192.168.1.110/b,192.168.1.110/c,
//       /apis   ， 
proxyTable: {
    '/apis': { 
        target: '192.168.1.110', 
        changeOrigin: true,
        pathRewrite: {
            '^/apis': '' //  /apis    ,
        }       
    }
}
//     ：/apis/a，/apis/b，/apis/c
//  '/apis'        ，           ，      pathRewrite '/apis'    
//'^'        '/apis'

//                 
//           ：192.168.1.110/apis1/a,192.168.1.110/apis1/b,192.168.1.110/apis2/a,192.168.1.110/apis2/b
//        ， 
proxyTable: {
    '/apis1': { 
        target: '192.168.1.110', //    
        changeOrigin: true
    }
    '/apis2': { 
        target: '192.168.1.110', //    
        changeOrigin: true
    }
}
//  ：/apis1/a,/apis1/b,/apis2/a,/apis2/b

バックエンドが受け取るデータ転送方式を確認する
  最初のインタフェースをテストする時、JSON列形式でパラメータを伝達して、明らかにパラメータはすべて伝達して、後端は依然としてパラメータが足りないことを提示します.テストにより,バックエンドがJSONシリアル方式の転送パラメータをサポートしていないことが分かった.処理方法:手動でデータを'x-www-form-urlencode'フォーマットまたは'form-data'フォーマットに変換します.あるいはqs依存を導入してパラメータ伝送方式を変換する.
インタフェースの統合
生産環境と開発環境のインタフェースは,異なる可能性が高い.この場合、インタフェースを統合することで、異なるベースインタフェースを実際に生産し、開発する必要があります.また、エラーといくつかのベースパラメータを統一的に構成することもできます.次のようになります.

// index.js
//   axios qs  
import axios from 'axios' 
import qs from 'qs'

//     ，     baseURL
const baseURL = process.env.NODE_ENV === 'production'
  ? 'https://www.exaple.com'//   
  : 'http://192.1.2.110:8180' //   

//  axios  ，    url     
let axiosIns = axios.create({
  baseURL,
  timeout: 3000
})
//      
axiosIns.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error)
})
//      
axiosIns.interceptors.response.use(function (rawResp) {
  return rawResp
}, function (error) {
  return Promise.reject(error)
})
//      aixos     
export default function axiosCreation ({method = 'GET'} = {}, enableQs = true) {
  let arg = arguments[0]
  let opts = Object.assign({method}, arg)
  enableQs && opts.data && (opts.data = qs.stringify(opts.data))
  return axiosIns(opts) 
}

  ビジネスに応じて、異なるapiリクエストファイルを分類して作成できます.

//traffic.js
//  index.js axiosCreation  
import axiosCreation from './index.js'

/**
 *       topCross
 */
export function topCross (params) {
  return axiosCreation({
    url: '/traffic/topCross',
    data: params
  })
}
...
export function topCongestion (params) {
    ...
}
export function OnroadNum (params) {
    ...
}

ページでAPIを使用するには、必要なインタフェースをインポートするだけです.

import {topCongestion} from '../../api/traffic.js'
...
...
topCongestion({a:1,b:2})
  .then(data => {console.log(data)}) //    
  .catch(err => {console.log(err)})  //