axios

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

安裝

npm i axios

封裝

我把a(bǔ)xios請求封裝在http.js中，重新把get請求，post請求封裝了一次

首先，引入axios

import axios from 'axios' 復(fù)制代碼

設(shè)置接口請求前綴

一般我們開發(fā)都會有開發(fā)、測試、生產(chǎn)環(huán)境，前綴需要加以區(qū)分，我們利用node環(huán)境變量來作判斷，

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' } 復(fù)制代碼

在localhost調(diào)試時(shí)，直接用開發(fā)地址一般都會有跨域的問題，所以我們還需要配置代理

本項(xiàng)目是vue cli3搭建的，代理配置是在vue.config.js文件中:

module.exports = {devServer: {proxy: {'/proxyApi': {target: 'http://dev.xxx.com',changeOrigin: true,pathRewrite: {'/proxyApi': ''}}}} } 復(fù)制代碼

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

修改一下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' } 復(fù)制代碼

攔截器

接著設(shè)置超時(shí)時(shí)間和請求頭信息

axios.defaults.timeout = 10000 // 請求頭信息是為post請求設(shè)置 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' 復(fù)制代碼

axios很好用，其中之一就是它的攔截器十分強(qiáng)大，我們就可以為請求和響應(yīng)設(shè)置攔截器，比如請求攔截器可以在每個請求里加上token，做了統(tǒng)一處理后維護(hù)起來也方便，響應(yīng)攔截器可以在接收到響應(yīng)后先做一層操作，如根據(jù)狀態(tài)碼判斷登錄狀態(tài)、授權(quán)。

// 請求攔截器 axios.interceptors.request.use(config => {// 每次發(fā)送請求之前判斷是否存在token// 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況，此處token一般是用戶完成登錄后儲存到localstorage里的token && (config.headers.Authorization = token)return config},error => {return Promise.error(error)}) // 響應(yīng)攔截器 axios.interceptors.response.use(response => {// 如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數(shù)據(jù)// 否則的話拋出錯誤if (response.status === 200) {if (response.data.code === 511) {// 未授權(quán)調(diào)取授權(quán)接口} else if (response.data.code === 510) {// 未登錄跳轉(zhuǎn)登錄頁} else {return Promise.resolve(response)}} else {return Promise.reject(response)} }, error => {// 我們可以在這里對異常狀態(tài)作統(tǒng)一處理if (error.response.status) {// 處理請求失敗的情況// 對不同返回碼對相應(yīng)處理return Promise.reject(error.response)} })復(fù)制代碼

get post的封裝

httpGet: 一個參數(shù)是請求的url,一個就攜帶的請求參數(shù)，返回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)})}) }復(fù)制代碼

httpPost: 原理和get差不多，需要注意，這里多了個data參數(shù)，post請求提交前需要對它進(jìn)行序列號操作，這里是通過transformRequest做處理；另外兩個參數(shù)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}],// 發(fā)送的數(shù)據(jù)data,// url參數(shù)params}).then(res => {resolve(res.data)})}) } 復(fù)制代碼

如何使用

我把所有的接口調(diào)用都在api.js文件中

先引入封裝好的方法，再在要調(diào)用的接口重新封裝成一個方法暴露出去

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

在頁面中可以這樣調(diào)用：

// .vue import { getorglist } from '@/assets/js/api'getorglist({ id: 200 }).then(res => {console.log(res) }) 復(fù)制代碼

這樣可以把a(bǔ)pi統(tǒng)一管理起來，以后維護(hù)修改只需要在api.js文件操作即可。

完整代碼

最后貼上完整代碼

// http.js import axios from 'axios'// 環(huán)境的切換 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'// 響應(yīng)攔截器 axios.interceptors.response.use(response => {if (response.status === 200) {if (response.data.code === 511) {// 未授權(quán)調(diào)取授權(quán)接口} else if (response.data.code === 510) {// 未登錄跳轉(zhuǎn)登錄頁} else {return Promise.resolve(response)}} else {return Promise.reject(response)} }, error => {// 我們可以在這里對異常狀態(tài)作統(tǒng)一處理if (error.response.status) {// 處理請求失敗的情況// 對不同返回碼對相應(yīng)處理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}],// 發(fā)送的數(shù)據(jù)data,// url參數(shù)params}).then(res => {resolve(res.data)})}) } 復(fù)制代碼// 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}) } 復(fù)制代碼// .vue <script> import { getorglist } from '@/assets/js/api' export default {name: 'upload-card',data() {},mounted() {getorglist({ id: 200 }).then(res => {// console.log(res)})}, } </script> 復(fù)制代碼

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

3月25日更新

先謝謝幫我說話的小伙伴，沒想到這篇竟然有這么多閱讀量，原來只是隨手筆記，以為沒什么人看，周末一看有100多條消息，有點(diǎn)驚到了

針對評論區(qū)的提出意見，文章已經(jīng)做了更新修正

評論區(qū)疑問是為什么還要多封裝一層promise,不直接返回axios。 我在這里統(tǒng)一做個說明：

當(dāng)然可以直接返回axios.get().then(res=>res.data),寫法更簡潔些；個人編程習(xí)慣，感覺resolve(res.data)寫法更優(yōu)雅些,這個就見仁見智了，所以正文對這點(diǎn)先做保留。這篇筆記也是提供一個思路，僅供參考。小伙伴可以根據(jù)自己實(shí)際業(yè)務(wù)需求來選擇。

本人前端小白一枚 這次也是想記錄一下axios的使用，有什么不足之處歡迎各位提意見哈（盡量溫柔點(diǎn)），以后也會根據(jù)實(shí)際業(yè)務(wù)需求和大家的意見來做調(diào)整和修正（持續(xù)更新~)

轉(zhuǎn)載于:https://juejin.im/post/5c9350846fb9a070a804d3e0

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。