從0到1使用VUE-CLI3開發實戰（四）: Axios封裝

時間 2019-11-08

標籤使用 vue cli3 cli 開發實戰 axios 封裝欄目軟件設計简体版

原文原文鏈接

有不少同窗看了本系列的前幾篇以後建議我暫時先不用TS，因而小肆以後將把TS換成JS繼續下面的文章。今天給你們帶來項目中很是重要的一環，配置Axios,一塊兒來看看吧。vue

axios 簡介

首先要明白的是axios是什麼：axios是基於promise（諾言）用於瀏覽器和node.js是http客戶端。node

axios的做用是什麼呢：axios主要是用於向後臺發起請求的，還有在請求中作更可能是可控功能。ios

從瀏覽器中建立 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止 CSRF/XSRF

項目配置

首先固然仍是要安裝啦：

npm install axios
複製代碼

以後咱們新建一個api文件夾用來放接口和axios的配置。先給你們看看我配置好以後的文件夾目錄結構： vue-cli

能夠說此次配置是我劃分的比較詳細的配置方法了，具體每一個文件都分別作什麼用，咱們如今來看看吧。npm

axios.js

這個文件主要建立axios實例並對攔截器進行配置，不理解攔截器的同窗能夠看看下圖： json

import axios from 'axios'

// 建立 axios 實例
let service = axios.create({
  // headers: {'Content-Type': 'application/json'},
  timeout: 60000
})

// 設置 post、put 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'

// 添加請求攔截器
service.interceptors.request.use(
  (config) => {
    if (config.method === 'post' || config.method === 'put') {
      // post、put 提交時，將對象轉換爲string, 爲處理Java後臺解析問題
      config.data = JSON.stringify(config.data)
    }
    // 請求發送前進行處理
    return config
  },
  (error) => {
    // 請求錯誤處理
    return Promise.reject(error)
  }
)

// 添加響應攔截器
service.interceptors.response.use(
  (response) => {
    let { data } = response
    return data
  },
  (error) => {
    let info = {},
      { status, statusText, data } = error.response

    if (!error.response) {
      info = {
        code: 5000,
        msg: 'Network Error'
      }
    } else {
      // 此處整理錯誤信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
  }
)

/** * 建立統一封裝過的 axios 實例 * @return {AxiosInstance} */
export default function() {
  return service
}
複製代碼

index.js

index.js文件主要封裝咱們幾個經常使用的方法，get、post、put、deleteaxios

import axios from './axios'

let instance = axios()

export default {
  get(url, params, headers) {
    let options = {}

    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.get(url, options)
  },
  post(url, params, headers, data) {
    let options = {}

    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.post(url, data, options)
  },
  put(url, params, headers) {
    let options = {}

    if (headers) {
      options.headers = headers
    }
    return instance.put(url, params, options)
  },
  delete(url, params, headers) {
    let options = {}

    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.delete(url, options)
  }
}
複製代碼

install.js

install.js文件能夠把咱們全部的api接口安裝到全局，以後咱們在main.js文件中導入就能夠了。api

import apiList from './apiList'

const install = function(Vue) {
  if (install.installed) {
    return
  
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return apiList
      }
    }
  })
}

export default {
  install
}
複製代碼

main.js中添加：

import api from './api/install'
Vue.use(api)
複製代碼

apiList.js

把咱們全部的api文件夾導入到這一個文件中來。promise

import matches from './matches'
import user from './user'

export default {
  matches,
  user
}
複製代碼

baseUrl.js

根據不一樣的環境設定不一樣的baseUrl，在配置這個文件前，咱們先須要作以下幾件事： 1.根目錄新建.env.dev文件並在文件內寫入NODE_ENV = 'dev' 2.在package.json文件內添加：瀏覽器

"build:dev": "vue-cli-service build --mode dev",
 "build:pre": "vue-cli-service build --mode pre",
複製代碼

如下是baseUrl.js的代碼：

let baseUrl = '/api' // 本地代理

switch (process.env.NODE_ENV) {
  case 'dev':
    baseUrl = 'http://testserver.feleti.cn/' // 測試環境url
    break
  case 'pre':
    baseUrl = 'https://pre-server.feleti.cn' // 預上線環境url
    break
  case 'production':
    baseUrl = 'https://api.feleti.cn' // 生產環境url
    break
}

export default baseUrl
複製代碼

matches、user

這兩個文件夾都是根據api類型進行區分的，在項目之後也建議你們根據api類型劃分出不一樣的文件存放，在小項目中這樣作可能顯得很麻煩，但若是項目比較大，這樣作的優點就體現出來了。

咱們就只看看matches文件夾下的內容：

urls.js

把一個類型下的全部url接口放入這一個文件，我只放了一個暫時，能夠繼續添加。

import baseUrl from '../baseUrl'
export default {
  matches: baseUrl + '/matches'
}
複製代碼

index.js

有些接口須要在header中添加token或是其餘，能夠按以下配置。

import api from '../index'
import urls from './urls'

const header = {}

export default {
  matches(params) {
    // return出去了一個promise
    return api.get(urls.matches, params, header)
  }
}
複製代碼

配置完上述所有文件就算是大功告成了，下面咱們看看如何使用吧。

組件中調用

created() {
    this.matches()
  },
  methods: {
    async matches() {
      // 這裏用try catch包裹，請求失敗的時候就執行catch裏的
      try {
        //定義參數對象
        let params = {
          type: 'zc'
        }
        let res = await this.$api.matches.matches(params)

        console.log('getMatches -> res', res)
      } catch (e) {
        console.log('catch -> e', e)
      }
    }
  }
複製代碼

以後咱們就能夠在控制檯看到咱們調用成功的輸出日誌啦：