摘要：從到使用開發(fā)實(shí)戰(zhàn)四封裝有很多同學(xué)看了本系列的前幾篇之后建議我暫時(shí)先不用，于是小肆之后將把換成繼續(xù)下面的文章。前置閱讀用從到做一個(gè)完整功能手機(jī)站一從到開發(fā)實(shí)戰(zhàn)手機(jī)站二提交規(guī)范配置從到使用開發(fā)實(shí)戰(zhàn)三知識(shí)儲(chǔ)備

有很多同學(xué)看了本系列的前幾篇之后建議我暫時(shí)先不用TS，于是小肆之后將把TS換成JS繼續(xù)下面的文章。
今天給大家?guī)?lái)項(xiàng)目中非常重要的一環(huán)，配置Axios,一起來(lái)看看吧。

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

axios的作用是什么呢：axios主要是用于向后臺(tái)發(fā)起請(qǐng)求的，還有在請(qǐng)求中做更多是可控功能。

從瀏覽器中創(chuàng)建 XMLHttpRequest

從 node.js 發(fā)出 http 請(qǐng)求

支持 Promise API

攔截請(qǐng)求和響應(yīng)

轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)

取消請(qǐng)求

自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)

客戶端支持防止 CSRF/XSRF

首先當(dāng)然還是要安裝啦：

npm install axios

之后我們新建一個(gè)api文件夾用來(lái)放接口和axios的配置。
先給大家看看我配置好之后的文件夾目錄結(jié)構(gòu)：

可以說(shuō)這次配置是我劃分的比較詳細(xì)的配置方法了，具體每個(gè)文件都分別做什么用，我們現(xiàn)在來(lái)看看吧。

axios.js

這個(gè)文件主要?jiǎng)?chuàng)建axios實(shí)例并對(duì)攔截器進(jìn)行配置，不理解攔截器的同學(xué)可以看看下圖：

import axios from "axios"

// 創(chuàng)建 axios 實(shí)例
let service = axios.create({
  // headers: {"Content-Type": "application/json"},
  timeout: 60000
})

// 設(shè)置 post、put 默認(rèn) Content-Type
service.defaults.headers.post["Content-Type"] = "application/json"
service.defaults.headers.put["Content-Type"] = "application/json"

// 添加請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    if (config.method === "post" || config.method === "put") {
      // post、put 提交時(shí)，將對(duì)象轉(zhuǎn)換為string, 為處理Java后臺(tái)解析問(wèn)題
      config.data = JSON.stringify(config.data)
    }
    // 請(qǐng)求發(fā)送前進(jìn)行處理
    return config
  },
  (error) => {
    // 請(qǐng)求錯(cuò)誤處理
    return Promise.reject(error)
  }
)

// 添加響應(yīng)攔截器
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 {
      // 此處整理錯(cuò)誤信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
  }
)

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

index.js

index.js文件主要封裝我們幾個(gè)常用的方法，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接口安裝到全局，之后我們?cè)趍ain.js文件中導(dǎo)入就可以了。

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文件夾導(dǎo)入到這一個(gè)文件中來(lái)。

import matches from "./matches"
import user from "./user"

export default {
  matches,
  user
}

baseUrl.js

根據(jù)不同的環(huán)境設(shè)定不同的baseUrl，在配置這個(gè)文件前，我們先需要做如下幾件事：
1.根目錄新建.env.dev文件并在文件內(nèi)寫入NODE_ENV = "dev"
2.在package.json文件內(nèi)添加：

 "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/" // 測(cè)試環(huán)境url
    break
  case "pre":
    baseUrl = "https://pre-server.feleti.cn" // 預(yù)上線環(huán)境url
    break
  case "production":
    baseUrl = "https://api.feleti.cn" // 生產(chǎn)環(huán)境url
    break
}

export default baseUrl

matches、user

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

我們就只看看matches文件夾下的內(nèi)容：

urls.js

把一個(gè)類型下的所有url接口放入這一個(gè)文件，我只放了一個(gè)暫時(shí)，可以繼續(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出去了一個(gè)promise
    return api.get(urls.matches, params, header)
  }
}

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

created() {
    this.matches()
  },
  methods: {
    async matches() {
      // 這里用try catch包裹，請(qǐng)求失敗的時(shí)候就執(zhí)行catch里的
      try {
        //定義參數(shù)對(duì)象
        let params = {
          type: "zc"
        }
        let res = await this.$api.matches.matches(params)

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

之后我們就可以在控制臺(tái)看到我們調(diào)用成功的輸出日志啦：

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

用vue-cli3從0到1做一個(gè)完整功能手機(jī)站（一）

從0到1開發(fā)實(shí)戰(zhàn)手機(jī)站（二）：Git提交規(guī)范配置

從0到1使用VUE-CLI3開發(fā)實(shí)戰(zhàn)（三）: ES6知識(shí)儲(chǔ)備