axios

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

安裝

npm i axios

封裝

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

首先，引入axios

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

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

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

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í)，直接用開(kāi)發(fā)地址一般都會(huì)有跨域的問(wèn)題，所以我們還需要配置代理

本項(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í)間和請(qǐng)求頭信息

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

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

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

get post的封裝

httpGet: 一個(gè)參數(shù)是請(qǐng)求的url,一個(gè)就攜帶的請(qǐng)求參數(shù)，返回promise對(duì)象

// get 請(qǐng)求 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差不多，需要注意，這里多了個(gè)data參數(shù)，post請(qǐng)求提交前需要對(duì)它進(jìn)行序列號(hào)操作，這里是通過(guò)transformRequest做處理；另外兩個(gè)參數(shù)url,params和get請(qǐng)求的一樣；

// post請(qǐng)求 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)用的接口重新封裝成一個(gè)方法暴露出去

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

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

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

這樣可以把a(bǔ)pi統(tǒng)一管理起來(lái)，以后維護(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' }// 請(qǐng)求攔截器 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)登錄頁(yè)} else {return Promise.resolve(response)}} else {return Promise.reject(response)} }, error => {// 我們可以在這里對(duì)異常狀態(tài)作統(tǒng)一處理if (error.response.status) {// 處理請(qǐng)求失敗的情況// 對(duì)不同返回碼對(duì)相應(yīng)處理return Promise.reject(error.response)} })// get 請(qǐng)求 export function httpGet({url,params = {} }) {return new Promise((resolve, reject) => {axios.get(url, {params}).then((res) => {resolve(res.data)}).catch(err => {reject(err)})}) }// post請(qǐng)求 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日更新

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

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

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

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

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

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

總結(jié)

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

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