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 = 10000axios.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的使用，有什么不足之處歡迎各位提意見哈（盡量溫柔點），以后也會根據實際業務需求和大家的意見來做調整和修正（持續更新~)

轉載于:https://juejin.im/post/5c9350846fb9a070a804d3e0

總結

以上是生活随笔為你收集整理的vue中axios请求的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。