如何用vue封裝axios詳解！

如何用vue封裝axios

該專案需要在登入之前新增驗證碼，為了更加方便請求介面的區分，可以封裝兩個請求介面，乙個登入之前需要請求的介面，乙個為登入之後請求的介面，使之互不干擾。

1.登入前設定乙個資料夾axios,其中的index.js寫請求的介面，config.js寫配置

index.js

/*介面檔案*/

//axios配置檔案
import index from './config'
export default

import axios from 'axios'

import index from './index'
const instance = axios.create()
//請求***
instance.interceptors.request.use(
/*** @param config    傳入的url以及引數
*/(config) => ,
(error) => 
)//響應***
instance.interceptors.response.use(
(response) => ,
(error) => 
)/**
* @param  method 
* @param  path 
* @param  params
*/export default function (method, url, params) 
}

// 新增請求***

instance.interceptors.request.use(function (config) `;

} return config;

}, function (error) );

// http請求***

var loadinginstace = "";

instance.interceptors.request.use(config => )

return config

}, error => )

return promise.reject(error);

})// http響應***

instance.interceptors.response.use(data => , error => = error;

if (code == 'econnaborted') )

return promise.reject(error);

} const = error.response; //在response中有乙個status 我們用es6的方式解構出來

export default3.在main.js引入

import api from './request/api'

import index from './axios/index'
vue.prototype.$api = api
vue.prototype.$index = index

(1)登入前

如:登入頁面login.js

//登入前

submitform()).catch(err=>)
}

如：其中一登入後頁面

//登入後子頁面

getdata()).catch(err=>)
}

vue專案封裝axios

還是直奔主題吧，因為官方不推薦使用vue resource，而是推薦axios，所以這篇文章分享給大家我在自己的專案裡如何封裝axios，雖說將axios在main.js裡寫入vue的原型鏈作為vue的屬性 vue.prototype.http axios 直接用最原始的方法也能進行請求 這樣也不是...

vue簡單封裝axios

1 在src下新建api資料夾，在api資料夾下新建config.js檔案 2 config.js配置如下 import axios from axios import qs from qs mint ui 框架，若不需要請全部注釋掉 import from mint ui axios.defaul...

vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...