vue專案中對axios的封裝

一、安裝

npm install axios

一般我會在src目錄上建立乙個network資料夾

network資料夾中建立乙個config.js （用來封裝axios）和乙個api.js（用來統一管理介面）

三、config.js 中配置axios

// 引入axios

import axios from
'axios'
// 引入router路由
import router from
'@/router/index'
// 引入elementui中loading和messagebox
import
from
'element-ui'
// cookie
import
from
'@/common/cookie.js'
// ***** axios 配置 *****=
//post請求頭的設定
axios.defaults.headers.post[
'content-type']=
;// 設定請求超時
axios.defaults.timeout =
600000
// 環境的切換
axios.defaults.baseurl = process.env.
api_root
var loadinginstace // 這裡是loading
// element ui loading方法
default axios

// 引入配置好的axios 並命名為request

import request from
'./config'
// 設定post請求
const
userloginrequest=p
=> request.
post
('/***/login'
, p)
// 登入
// 設定get請求
const
queryorder=p
=> request.
get(
`/***/queryorder$`
)// 查詢訂單詳情
// 設定get請求
const
querylogistics=p
=> request.
get(
'/***/querylogistics'
, p)
// 查詢物流資訊
// 設定請求的responsetype
const
getexcel
=ids
=> request.
get(
'/***/getmerchantauditlistexcel',,
responsetype:
'blob'})
// 匯出excel
// 匯出介面
export

// 引入介面方式

import
from
'@/network/api'
// post請求
userloginrequest()
userloginrequest
(data)
.then
(res
=>)}
// get請求
queryorder()
`).then
(res
=>)}
// get請求
querylogistics()
querylogistics()
.then
(res
=>
)}

vue 專案中對 axios的封裝

axios是乙個輕量的http客戶端。基於xmlhttprequest服務來執行http請求，支援豐富的配置，支援promise，支援瀏覽器端和node.js端。自vue2.0起，尤大宣布取消對vue resource的官方推薦，轉而推薦axios。現在axios已經成為大部分vue開發者的首選 特...

vue專案中對axios的全域性封裝

專案中介面會很多，個人喜歡建立api檔案對請求統一管理 1.新建api資料夾，資料夾下建立 axios.js，login.js 2.axios.js import axios from axios import router from router 引入路由是為了做重定向，比如沒有登入過期定向到登入...

在vue專案中，對axios進行的封裝

由於專案需求，對axios進行了封裝。引入axios import axios from axios let cancel promisearr const canceltoken axios.canceltoken 請求 axios.interceptors.request.use config ...