為什麼要封裝axios請求方法，以及如何封裝

在專案的開發中有三個階段

開發環境(dev.abc.com)

測試環境(text.abc.com)

生產環境(abc.com)

訪問介面資料時，例如：商品介面會是【網域名稱】/api/v1/products

當環境不同時，直接修改網域名稱就可。這就是封裝請求的原因。

axios基礎get請求，post請求

老生常談，get請求傳送資料返回，post可以攜帶資料傳送處理請求(一般用於提交表單或者上傳資料)，token

發起get請求

//引數一表示請求位址
//引數二表示配置資訊
//params 表示傳遞到伺服器端的資料，已url引數的形式拼接在請求位址後面
//// 比如:
//最終生成：?page=1&per=3
// 其中?表示可選引數
//headers 表示請求頭
gethandle()
, headers:})
.then
(res=>console.
log(res))}
,posthandle()
,).then
(res => console.
log(res)).
catch
(err=>console.
log(err))}
,

首先先建立乙個request.js檔案

import axiox from

'axios'
const instance =axiox.
create()
//請求攔截
//所有的網路請求都會先走這個方法
// 新增請求***,所有的網路請求都會先走這個方法，我們可以在它裡面為請求新增一些自定義的內容
instance.interceptors.request.
use(
function
(config)
,function
(error));
// 新增響應***
//此處可以根據伺服器的返回狀態碼做響應的處理
//404 404 500
instance.interceptors.response.
use(
function
(response)
,function
(error));
export
function
get(url,params))}
export
function
post
(url,data)
export
function
del(url)
export
function
put(url,data)

首先，是簡單的get請求封裝

const instance =axiox.

create()
export
function
get(url,params)
)}

import

from
'../utils/request'
//匯入封裝的request檔案
getbyminehandle()
).then
(res=>).
catch
(err=>
)}

這裡新增了乙個自定義的token值

（token相當於客戶端的身份證）

//請求攔截

//所有的網路請求都會先走這個方法
// 新增請求***,所有的網路請求都會先走這個方法，我們可以在它裡面為請求新增一些自定義的內容
instance.interceptors.request.
use(
function
(config)
,function
(error)
);

instance.interceptors.response.

use(
function
(response)
,function
(error)
);

axios請求方法封裝

axios的使用上一般封裝好對應的方法,es6匯出,直接呼叫,訊息通知使用了elementui的message元件。這是乙個封裝了axios的rest風格的工具類,包擴常用的post,get,put,delete,在請求處理上使用統一的請求攔截處理。對返回的訊息進行攔截預處理，有資料返回資料，沒有返...

axios請求封裝

首先在vue專案下安裝axios以及支援非同步提示的iview元件庫 npm install axios npm install iview 在src資料夾下新建axios資料夾，在其中新建api.js用於存放介面，request.js用於封裝axios物件 編寫request.js 123 456...

axios請求封裝

axios請求封裝 新建http.js import axios from axios 匯入axios import router from router 匯入路由 import qs from qs import from element ui 匯入element ui const configb...