vue中axios請求的封裝

hover_lew 發布于2019-08-23 16:18 / 3191人閱讀

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

1.發送請求模塊目錄

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

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

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

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

3.requireURLs.js

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

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，最終得到的對象如下:

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/`, // 不同環境（dev/prod/test）使用不同的baseURL
  timeout: 5000
})
service.interceptors.request.use(
  config => {
    // 上傳文件時，config.data的數據類型是FormData，
    // qs.stringify(FormData)的結果是空字符串，導致接口報**參數為空**的錯誤
    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 // 后臺會把{ code, data, msg }返回到response.data中
    if (response.headers["content-type"].indexOf("application/vnd.ms-excel") !== -1) {
      // 通過請求接口下載Excel，由于后臺返回的數據中（res）沒有code（我也不知道為什么，反正后臺就說沒有），所以我只好通過響應頭的content-type判斷了
      // 下載接口返回的response header如下（后臺把文件名放在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) { // 和后臺約定code:0代表請求成功
      return res
    } else {
      if (res.code === 18500) { // 和后臺約定code:18500代表token未過期，但是被更新了
        handleLogin("您已被登出，請重新登錄")
      } else if (res.code === 18501) { // 和后臺約定code:18500代表token過期
        handleLogin("登錄已失效，請重新登錄")
      } else {
        // 統一處理接口的報錯信息，如果需要具體到頁面去處理，可以和后臺另外約定一個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開頭指定了一個url，直接用；否則就去遍歷步驟3中的urls對象。如下：
  // 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 }
  
  // 由于我司后臺提供的接口大都是post和get，所以只考慮了這兩種請求方式
  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中創建一個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.發送請求：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102883.html

Spring Boot + Vue 前后端分離開發，前端網絡請求封裝與配置

摘要：今天松哥就帶大家來看看的使用。此時啟動前端項目，就可以順利發送網絡請求了。松哥將自己封裝的網絡請求庫已經放在上，歡迎大家參考。前端網絡訪問，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，網絡訪問較多的采用 vue-resources，Vue2.0 之后，官方不再建議使用 vue-resources ，這個項目本身也停止維護，目前建議使用的方案是 axios。今天松哥就帶大...

Ku_Andrew 2019-05-23 11:48 評論0 收藏0
vue + axios---封裝一個http請求

摘要：在使用開發時，官方推薦使用來請求接口官方地址但是并不像一樣擁有，即不能直接來使用，所以需要我們自己根據來寫一個具有方法的庫。在使用vue開發時，官方推薦使用axios來請求接口 // axios官方地址 https://github.com/axios/axios 但是axios并不像 vue-resource 一樣擁有install，即不能直接 Vue.use(axios) ...

Scliang 2019-08-23 14:01 評論0 收藏0
vue封裝axios基本思路

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在vue項目之中使用axios是一個非常明智的選擇，因為vue官方已經宣稱不再維護vue-resource,并且推薦使用axios. 1 為什么選擇axios？使用axios可以統一做請求-響應攔截，例如響應時我們將響應信息攔截起來，判斷狀態碼，從而彈出報錯信息設定請求超時,例如3000ms未響應...

microcosm1994 2019-08-26 12:10 評論0 收藏0
vue-cli中怎么基于axios去封裝方法

摘要：大家好，我是，潛水于掘金和思否的一名前端小小生，今天看了幾篇文章關于中怎么去封裝，視乎好多版本都是基于去做的。 **大家好，我是minijie，潛水于掘金和思否的一名前端小小生，今天看了幾篇文章關于vue中怎么去封裝axios，視乎好多版本都是基于promise去做的。這讓我很疑惑，axios不就是基于promise的一個請求庫嗎？為啥還要多一層promise呢？下面是根據我自己的想法...

baiy 2019-08-23 16:20 評論0 收藏0
從0到1使用VUE-CLI3開發實戰（四）: Axios封裝

摘要：從到使用開發實戰四封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用，于是小肆之后將把換成繼續下面的文章。前置閱讀用從到做一個完整功能手機站一從到開發實戰手機站二提交規范配置從到使用開發實戰三知識儲備從0到1使用VUE-CLI3開發實戰（四）: Axios封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用TS，于是小肆之后將把TS換成JS繼續下面的文章。今天給大家帶來項目中非常...

ThinkSNS 2019-08-23 14:57 評論0 收藏0
二次封裝axios，根據參數來實現多個請求多次攔截

摘要：新建文件，設置請求攔截和處理的邏輯取消請求設置默認請求頭，如果不需要可以取消這一步請求超時的時間限制開始設置請求發起的攔截處理代表發起請求的參數的實體得到參數中的字段，用于決定下次發起請求，取消對應的相同字段的請求如果沒有就默認添加一個 1. 新建 axiosTool.js 文件，設置請求攔截和處理的邏輯 import Vue from vue import axios from ax...

MoAir 2019-08-02 11:47 評論0 收藏0