vue中 axios的封裝

1、簡介

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。簡單來說就是前端最火最簡單的一個http請求解決方案。

2、安裝

npm install vuex --save 

3、功能

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF

4、代碼封裝

下面給出一份封裝好的配置文件，更加詳細的直接去官方文檔查詢即可。
（1）工具類封裝

// 引入axios import axios from 'axios'; // 創建axios實例 const httpService = axios.create({ // url前綴-'https://some-domain.com/api/' baseURL: process.env.BASE_API, // 需自定義 // 請求超時時間 timeout: 3000 // 需自定義 }); // request攔截器 httpService.interceptors.request.use( config => { // 根據條件加入token-安全攜帶 if (true) { // 需自定義 // 讓每個請求攜帶token config.headers['User-Token'] = ''; } return config; }, error => { // 請求錯誤處理 Promise.reject(error); } ) // respone攔截器 httpService.interceptors.response.use( response => { // 統一處理狀態 const res = response.data; if (res.statuscode != 1) { // 需自定義 // 返回異常 return Promise.reject({ status: res.statuscode, message: res.message }); } else { return response.data; } }, // 處理處理 error => { if (error && error.response) { switch (error.response.status) { case 400: error.message = '錯誤請求'; break; case 401: error.message = '未授權，請重新登錄'; break; case 403: error.message = '拒絕訪問'; break; case 404: error.message = '請求錯誤,未找到該資源'; break; case 405: error.message = '請求方法未允許'; break; case 408: error.message = '請求超時'; break; case 500: error.message = '服務器端出錯'; break; case 501: error.message = '網絡未實現'; break; case 502: error.message = '網絡錯誤'; break; case 503: error.message = '服務不可用'; break; case 504: error.message = '網絡超時'; break; case 505: error.message = 'http版本不支持該請求'; break; default: error.message = `未知錯誤${error.response.status}`; } } else { error.message = "連接到服務器失敗"; } return Promise.reject(error); } ) /*網絡請求部分*/ /* * get請求 * url:請求地址 * params:參數 * */ export function get(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: 'get', params: params }).then(response => { resolve(response); }).catch(error => { reject(error); }); }); } /* * post請求 * url:請求地址 * params:參數 * */ export function post(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: 'post', data: params }).then(response => { resolve(response); }).catch(error => { reject(error); }); }); } /* * 文件上傳 * url:請求地址 * params:參數 * */ export function fileUpload(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: 'post', data: params, headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { resolve(response); }).catch(error => { reject(error); }); }); } export default { get, post, fileUpload } 

（2）使用

// 引入工具類-目錄自定義 import fetch from '@/util/fetch' // 使用 const TMPURL = ''; // url地址 const params = {}; // 參數 fetch.post(TMPURL + '/login/login', params);