vue中axios請(qǐng)求的封裝

hover_lew 發(fā)布于2019-08-23 16:18 / 3250人閱讀

摘要：整合，最終得到的對(duì)象如下注意模塊名和沒有了，所以需要注意命名的唯一，以免覆蓋。如下，，由于我司后臺(tái)提供的接口大都是和，所以只考慮了這兩種請(qǐng)求方式在中創(chuàng)建一個(gè)，并在中引用發(fā)送請(qǐng)求

1.發(fā)送請(qǐng)求模塊目錄

2.@/api/url中存放的是每個(gè)模塊的URL

// 商品模塊 product.js
const product = {
  sku: {
    list: "/product/product/speclist",
    options: "/product/product/options"
  }
}
export default product

// 公用請(qǐng)求模塊 common.js
const common = {
  region: {
    provinces: "/region/region/list",
    cities: "/region/region/list"
  },
  upload: {
    image: "/product/product/upload"
  }
}
export default common

發(fā)送請(qǐng)求的時(shí)候只需要指定key（sku/list），如：this.$ajax("sku/list", param)；假定axios設(shè)置的baseURL是http://prod.storm.com/api/，那么最終的請(qǐng)求地址：http://prod.storm.com/api/product/product/speclist

3.requireURLs.js

使用webpack提供的require.context將src/api/url下后綴為js的所有文件引入，并整理出一個(gè)對(duì)象。

let urls = {}
const req = require.context("./url", false, /.js$/)

const requireAll = requireContext => requireContext.keys().map(i => {
  let url = requireContext(i)
  Object.assign(urls, url.default)
})
requireAll(req)
export default urls

整合common.js & product.js，最終得到的對(duì)象如下:

urls = {
  sku: {
    list: "/product/product/speclist",
    options: "/product/product/options"
  },
  region: {
    provinces: "/region/region/list",
    cities: "/region/region/list"
  },
  upload: {
    image: "/product/product/upload"
  }
}
// 注意：模塊名product和common沒有了，所以需要注意命名的唯一，以免覆蓋。

4.ajax.js

import axios from "axios"
import qs from "qs"
import jsd from "js-file-download"
import store from "@/store"
import urlObj from "./requireURLs"
import { Message, MessageBox } from "element-ui"
import { getToken } from "@/utils/auth"

const service = axios.create({
  baseURL: `${process.env.BASE_API}/api/`, // 不同環(huán)境（dev/prod/test）使用不同的baseURL
  timeout: 5000
})
service.interceptors.request.use(
  config => {
    // 上傳文件時(shí)，config.data的數(shù)據(jù)類型是FormData，
    // qs.stringify(FormData)的結(jié)果是空字符串，導(dǎo)致接口報(bào)**參數(shù)為空**的錯(cuò)誤
    if (config.method === "post" && config.data.constructor !== FormData) {
      config.data = qs.stringify(config.data)
    }
    if (store.getters.token) {
      config.headers.common["Auth-Token"] = getToken()
      // Auth-Token 登錄過期后，重新登錄不傳token
      if (!config.headers.common["Auth-Token"]) {
        delete config.headers.common["Auth-Token"]
      }
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    const res = response.data // 后臺(tái)會(huì)把{ code, data, msg }返回到response.data中
    if (response.headers["content-type"].indexOf("application/vnd.ms-excel") !== -1) {
      // 通過請(qǐng)求接口下載Excel，由于后臺(tái)返回的數(shù)據(jù)中（res）沒有code（我也不知道為什么，反正后臺(tái)就說沒有），所以我只好通過響應(yīng)頭的content-type判斷了
      // 下載接口返回的response header如下（后臺(tái)把文件名放在Content-Disposition中（filename））
      // Content-Disposition: attachment; filename=20190323211209.csv
      // Content-Type: application/vnd.ms-excel;charset=GBK
      let fileName = response.headers["content-disposition"].split("=")[1]
      jsd(res, fileName)
      return
    }
    if (res.code === 0) { // 和后臺(tái)約定code:0代表請(qǐng)求成功
      return res
    } else {
      if (res.code === 18500) { // 和后臺(tái)約定code:18500代表token未過期，但是被更新了
        handleLogin("您已被登出，請(qǐng)重新登錄")
      } else if (res.code === 18501) { // 和后臺(tái)約定code:18500代表token過期
        handleLogin("登錄已失效，請(qǐng)重新登錄")
      } else {
        // 統(tǒng)一處理接口的報(bào)錯(cuò)信息，如果需要具體到頁(yè)面去處理，可以和后臺(tái)另外約定一個(gè)code
        Message({
          message: res.msg,
          type: "error",
          duration: 3 * 1000
        })
      }
      return Promise.reject(res)
    }
  },
  error => {
    let data = error.response.data
    Message({
      message: data.msg,
      type: "error",
      duration: 3 * 1000
    })
    return Promise.reject(data)
  }
)

const handleLogin = title => {
  MessageBox.confirm(title, "提示", {
    confirmButtonText: "重新登錄",
    showCancelButton: false,
    showClose: false,
    type: "warning"
  }).then(() => {
    store.dispatch("FedLogout").then(() => {
      location.reload()
    })
  })
}

const ajax = (path, data = {}, options = {}) => {
  // 如果path以http開頭指定了一個(gè)url，直接用；否則就去遍歷步驟3中的urls對(duì)象。如下：
  // this.$ajax("http://test.storm.com")，url = "http://test.storm.com"
  // this.$ajax("sku/list")，url = "/product/product/speclist"
  let url = path.indexOf("http") === -1 ? path.split("/").reduce((o, k) => {
    return o[k]
  }, urlObj) : path
  let method = options.method || "post"
  let params = { url, method }
  
  // 由于我司后臺(tái)提供的接口大都是post和get，所以只考慮了這兩種請(qǐng)求方式
  if (options.method === "get") {
    Object.assign(params, { params: data }, options)
  } else {
    // post
    Object.assign(params, { data }, options)
  }
  return service(params)
}

export default ajax

5.在src/plugins中創(chuàng)建一個(gè)ajaxPlugin.js，并在src/main.js中引用

// ajaxPlugin.js
import ajax from "@/api/ajax"

let ajaxPlugin = {}

ajaxPlugin.install = Vue => {
  Vue.prototype.$ajax = ajax
}

export default ajaxPlugin

// main.js
import ajaxPlugin from "@/plugins/ajaxPlugin"

Vue.use(ajaxPlugin)

6.發(fā)送請(qǐng)求：

this.$ajax("sku/list").then(res => {})

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102883.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hover_lew

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

實(shí)戰(zhàn)利用Beyond Compare批量對(duì)比主題代碼正版支持試用期30天

閱讀 3162·2021-10-27 14:16
hosthatch，大硬盤VPS，$20/年，1核/512M內(nèi)存/500G HDD/2T月流量，支付

閱讀 2960·2021-09-24 10:33
C語(yǔ)言實(shí)現(xiàn)簡(jiǎn)單通訊錄

閱讀 2373·2021-09-23 11:21
主機(jī)管理面板用什么地方-云主機(jī)用什么免費(fèi)管理面板？

閱讀 3285·2021-09-22 15:14
webapp字號(hào)大小跟隨系統(tǒng)字號(hào)大小縮放

閱讀 888·2019-08-30 15:55
[開源] SpriteJS -- 一款簡(jiǎn)單的跨終端 canvas 繪圖框架

閱讀 1750·2019-08-30 15:53
如何使用CSS和SVG剪切和遮罩技術(shù)

閱讀 1855·2019-08-29 11:14
用CSS繪制三角形

閱讀 2245·2019-08-28 18:11

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue中axios請(qǐng)求的封裝

相關(guān)文章

**Spring Boot + Vue 前后端分離開發(fā)，前端網(wǎng)絡(luò)請(qǐng)求封裝與配置**

vue + axios---封裝一個(gè)http請(qǐng)求

vue封裝axios基本思路

vue-cli中怎么基于axios去封裝方法

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

**二次封裝axios，根據(jù)參數(shù)來(lái)實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截**

發(fā)表評(píng)論

0條評(píng)論

hover_lew

男|高級(jí)講師

TA的文章

實(shí)戰(zhàn)利用Beyond Compare批量對(duì)比主題代碼正版支持試用期30天

hosthatch，大硬盤VPS，$20/年，1核/512M內(nèi)存/500G HDD/2T月流量，支付

C語(yǔ)言實(shí)現(xiàn)簡(jiǎn)單通訊錄

主機(jī)管理面板用什么地方-云主機(jī)用什么免費(fèi)管理面板？

webapp字號(hào)大小跟隨系統(tǒng)字號(hào)大小縮放

[開源] SpriteJS -- 一款簡(jiǎn)單的跨終端 canvas 繪圖框架

如何使用CSS和SVG剪切和遮罩技術(shù)

用CSS繪制三角形

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue中axios請(qǐng)求的封裝

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！