vue中axios請求的封裝

黃呼呼發表於2019-03-21
VueiOS封裝

axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中, 也是vue官方推薦使用的http庫；封裝axios，一方面為了以後維護方便，另一方面也可以對請求進行自定義處理

安裝

npm i axios

封裝

我把axios請求封裝在http.js中，重新把get請求，post請求封裝了一次

首先，引入axios

import axios from 'axios'
複製程式碼

設定介面請求字首

一般我們開發都會有開發、測試、生產環境，字首需要加以區分，我們利用node環境變數來作判斷，

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}
複製程式碼

在localhost除錯時，直接用開發地址一般都會有跨域的問題，所以我們還需要配置代理

本專案是vue cli3搭建的，代理配置是在vue.config.js檔案中:

module.exports = {
  devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }
}
複製程式碼

這樣就成功把/proxyApi 指向了 'http://dev.xxx.com'，重啟服務

修改一下http.js中的配置

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}
複製程式碼

攔截器

接著設定超時時間和請求頭資訊

axios.defaults.timeout = 10000
// 請求頭資訊是為post請求設定
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
複製程式碼

axios很好用，其中之一就是它的攔截器十分強大，我們就可以為請求和響應設定攔截器，比如請求攔截器可以在每個請求里加上token，做了統一處理後維護起來也方便，響應攔截器可以在接收到響應後先做一層操作，如根據狀態碼判斷登入狀態、授權。

// 請求攔截器
axios.interceptors.request.use(
  config => {
    // 每次傳送請求之前判斷是否存在token
    // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登入情況，此處token一般是使用者完成登入後儲存到localstorage裡的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })
// 響應攔截器
axios.interceptors.response.use(response => {
  // 如果返回的狀態碼為200，說明介面請求成功，可以正常拿到資料
  // 否則的話丟擲錯誤
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授權調取授權介面
    } else if (response.data.code === 510) {
      // 未登入跳轉登入頁
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我們可以在這裡對異常狀態作統一處理
  if (error.response.status) {
    // 處理請求失敗的情況
    // 對不同返回碼對相應處理
    return Promise.reject(error.response)
  }
})

複製程式碼

get post的封裝

httpGet: 一個引數是請求的url,一個就攜帶的請求引數，返回promise物件

// get 請求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

複製程式碼

httpPost: 原理和get差不多，需要注意，這裡多了個data引數，post請求提交前需要對它進行序列號操作，這裡是通過transformRequest做處理；另外兩個引數url,params和get請求的一樣；

// post請求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 傳送的資料
      data,
      // url引數
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}
複製程式碼

如何使用

我把所有的介面呼叫都在api.js檔案中

先引入封裝好的方法，再在要呼叫的介面重新封裝成一個方法暴露出去

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

複製程式碼

在頁面中可以這樣呼叫：

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})
複製程式碼

這樣可以把api統一管理起來，以後維護修改只需要在api.js檔案操作即可。

完整程式碼

最後貼上完整程式碼

// http.js
import axios from 'axios'

// 環境的切換
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

// 請求攔截器
axios.interceptors.request.use(
  config => {
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

axios.defaults.timeout = 10000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 響應攔截器
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授權調取授權介面
    } else if (response.data.code === 510) {
      // 未登入跳轉登入頁
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我們可以在這裡對異常狀態作統一處理
  if (error.response.status) {
    // 處理請求失敗的情況
    // 對不同返回碼對相應處理
    return Promise.reject(error.response)
  }
})

// get 請求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post請求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 傳送的資料
      data,
      // url引數
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}
複製程式碼
// api.js
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

export const save = (data) => {
  return httpPost({
    url: 'apps/wechat/api/save_member',
    data
  })
}
複製程式碼
// .vue
<script>
import { getorglist } from '@/assets/js/api'
export default {
  name: 'upload-card',
  data() {},
  mounted() {
    getorglist({ id: 200 }).then(res => {
      // console.log(res)
    })
  },
}
</script>
複製程式碼

=========================================================

3月25日更新

先謝謝幫我說話的小夥伴，沒想到這篇竟然有這麼多閱讀量，原來只是隨手筆記，以為沒什麼人看，週末一看有100多條訊息，有點驚到了

針對評論區的提出意見，文章已經做了更新修正

評論區疑問是為什麼還要多封裝一層promise,不直接返回axios。 我在這裡統一做個說明：

當然可以直接返回axios.get().then(res=>res.data),寫法更簡潔些；個人程式設計習慣，感覺resolve(res.data)寫法更優雅些,這個就見仁見智了，所以正文對這點先做保留。這篇筆記也是提供一個思路，僅供參考。小夥伴可以根據自己實際業務需求來選擇。

本人前端小白一枚 這次也是想記錄一下axios的使用，有什麼不足之處歡迎各位提意見哈（儘量溫柔點），以後也會根據實際業務需求和大家的意見來做調整和修正（持續更新~)

相關文章