二次パッケージaxios要求（React、Vueは全部使用可能）

日結びブログ04.19.18 HZ
毎回axiosと配置パスをページから導入する行為については、飽きることなく嫌悪しています。毎回、バックグラウンドでapiの住所を変更するたびに、たくさんのページから小さなaxios.getを見つけなければなりません。
包装してください。万物は全部包装できます。長年の眼病を治療しました。
パッケージのより合理的なAxios操作クラス
 
1.axiosをあなたのプロジェクトに導入する

npm install --save axios

2.ルートでhttp.jsを作成する
まずaxiosからhttpファイルを導入します。

import axios from 'axios'

axiosのデフォルトURLを設定します。

axios.defauls.baseURL = 'xxx'

ドメインをまたいでクッキーを携帯できるように設定します。

axios.defaults.withCredentials = true

タイムアウト時間の設定

axios.defaults.timeout = 100000

これはajaxのリクエストです。

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

設定要求ブロック

 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        //            token  
    ])
    return config
 })

対応するブロックを設定

// axios   
axios.interceptors.response.use(response => {
 //                     
if (response.data.retcode === 200 || response.data.retcode === '200') {
  return response.data.data || response.data
}else {
  //  200    
  throw Error(response.data.msg || '    ')
}
​

最後に戻る（詳細設定はaxioの公式アプリを見ることができます）

export defaul axios

すべてのファイル

import axios from 'axios'
axios.defauls.baseURL = 'xxx'
axios.defaults.withCredentials = true
axios.defaults.timeout = 100000
// // axios   
 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        //            token  
    ])
    return config
 })
 
 axios.interceptors.response.use(response => {
     //                     
    if (response.data.retcode === 200 || response.data.retcode === '200') {
      return response.data.data || response.data
    }else {
      //  200    
      throw Error(response.data.msg || '    ')
 }
​
export default axios

ここを見てがっかりしましたか？焦らないでください。次にappi.jsファイルを新しく作ります。
匿名関数をカプセル化してappisオブジェクトに戻り、appisオブジェクトのキー名で対応するapiアドレスを取得します。

//       ，       ：
//  1.               
//  2.        ，    
​
const prefix = '' // api    
export default(config => {
    return Object.keys(config).reduce((copy, name) => {
      copy[name] = `${prefix}$config[name]`
      return copy
    })
})({
  // example api
  "getExampleData": "/api/example/data" 
})
​

ファイルは最終的にオブジェクトに戻ります。

// api  
{
  getExampleData: '/api/example/data'
}

ここを見たらちょっと迷っていますか？
もう一つのserviceフォルダを作成して、その下にindex.jsを新規作成します。
（src/server/index.js）

import http from '../http.js' //         axios  
import apis from '../api.js' //         apis  
​
export funciton getExampleData (params = {}) { //        ，          
    retun http.get(apis.getExampleData, params) // return   get/post  ，      ，        
}

ここを見て、はっと悟ったのではないでしょうか？exampleDataを取得するインターフェースを一つの方法にカプセル化して、必要なページで対応の方法を呼び出すといいです。
Vueページ参照

import { getExampleData } from 'services'
​
...
beforeCreate() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.exampleData = res //    data 
        consonle.log(res) //          http.js           
    }).catch(err => console.log(err)) //       
}
...

Reactページ参照

import { getExampleData } from 'services'
​
...
componentWillMount() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.setState({
            exampleData: res //    state 
        })
        consonle.log(res) //          http.js           
    }).catch(err => console.log(err)) //       
}

これを使ってからはappisの雑多や管理が難しくなり、直せないなどの通弊がないようにしてください。
 
好きならいいです。ありがとうございます
 
転載:https://blog.csdn.net/frank_come/articale/detail/800101611