從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(四): Axios封裝

從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(四): Axios封裝

有很多同學看了本系列的前幾篇之后建議我暫時先不用TS,于是小肆之后將把TS換成JS繼續(xù)下面的文章。
今天給大家?guī)眄椖恐蟹浅V匾囊画h(huán),配置Axios,一起來看看吧。

axios 簡介

首先要明白的是axios是什么:axios是基于promise(諾言)用于瀏覽器和node.js是http客戶端。

axios的作用是什么呢:axios主要是用于向后臺發(fā)起請求的,還有在請求中做更多是可控功能。

  • 從瀏覽器中創(chuàng)建 XMLHttpRequest
  • 從 node.js 發(fā)出 http 請求
  • 支持 Promise API
  • 攔截請求和響應
  • 轉換請求和響應數(shù)據(jù)
  • 取消請求
  • 自動轉換JSON數(shù)據(jù)
  • 客戶端支持防止 CSRF/XSRF

項目配置

首先當然還是要安裝啦:
npm install axios

之后我們新建一個api文件夾用來放接口和axios的配置。
先給大家看看我配置好之后的文件夾目錄結構:


image

可以說這次配置是我劃分的比較詳細的配置方法了,具體每個文件都分別做什么用,我們現(xiàn)在來看看吧。

axios.js

這個文件主要創(chuàng)建axios實例并對攔截器進行配置,不理解攔截器的同學可以看看下圖:


image
import axios from 'axios'

// 創(chuàng)建 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)
    }
    // 請求發(fā)送前進行處理
    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
      }
    }
  }
)

/**
 * 創(chuàng)建統(tǒng)一封裝過的 axios 實例
 * @return {AxiosInstance}
 */
export default function() {
  return service
}
index.js

index.js文件主要封裝我們幾個常用的方法,get、post、put、delete

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文件中導入就可以了。

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文件夾導入到這一個文件中來。

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

export default {
  matches,
  user
}
baseUrl.js

根據(jù)不同的環(huán)境設定不同的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/' // 測試環(huán)境url
    break
  case 'pre':
    baseUrl = 'https://pre-server.feleti.cn' // 預上線環(huán)境url
    break
  case 'production':
    baseUrl = 'https://api.feleti.cn' // 生產(chǎn)環(huán)境url
    break
}

export default baseUrl
matches、user

這兩個文件夾都是根據(jù)api類型進行區(qū)分的,在項目以后也建議大家根據(jù)api類型劃分出不同的文件存放,在小項目中這樣做可能顯得很麻煩,但如果項目比較大,這樣做的優(yōu)勢就體現(xiàn)出來了。

我們就只看看matches文件夾下的內容:

urls.js

把一個類型下的所有url接口放入這一個文件,我只放了一個暫時,可以繼續(xù)添加。

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包裹,請求失敗的時候就執(zhí)行catch里的
      try {
        //定義參數(shù)對象
        let params = {
          type: 'zc'
        }
        let res = await this.$api.matches.matches(params)

        console.log('?getMatches -> res', res)
      } catch (e) {
        console.log('?catch -> e', e)
      }
    }
  }

之后我們就可以在控制臺看到我們調用成功的輸出日志啦:


image

小結

在實際工作中,我們盡量要把項目做的細致一些,尤其是項目開始之前的配置,今天所涉及到的很多文件在之后的配置中還會有進步的更改,比如配置用戶相關的接口、配置全局loading等,大家只要能把今天的內容完全理解,之后再配置這里就很容易啦。

前置閱讀:

  1. 用vue-cli3從0到1做一個完整功能手機站(一)
  2. 從0到1開發(fā)實戰(zhàn)手機站(二):Git提交規(guī)范配置
  3. 從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(三): ES6知識儲備
image
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 我們所要的說的axios的封裝和api接口的統(tǒng)一管理,其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護。 一...
    kangaroo_v閱讀 8,458評論 1 67
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 2,961評論 1 4
  • 一份值得用力珍惜的感情, 不是互相攀比,而是相互吸引; 不是刻意奉承,而是隨心相處; 不是游戲態(tài)度,而是用力珍惜。...
    漂浮的流云閱讀 349評論 0 1
  • 最近做的項目上有一個排序功能 以前就很少用js的sort,正好可以補補了 先說說sort方法直接用 arr.sor...
    明月半倚深秋_f45e閱讀 5,892評論 2 2
  • 一、生意場上最親密的朋友,也可能變?yōu)閷κ?背叛往往來自于自己最信任的人,那個從小到大和你穿同一條褲子的人,一旦被利...
    貓兔閱讀 246評論 1 4