1.安裝

1 npm install axios --save

2.新建http.js，封裝攔截器以及多種請求方式

1 import axios from 'axios'; 2 import { Message } from 'element-ui'; 3 4 // 請求攔截器 5 axios.interceptors.request.use( 6 config => { 7 //發送請求前需要做什么，一般檢查token 8 return config; 9 }, 10 11 error => { 12 // 對請求錯誤做些什么 13 return Promise.reject(error); 14 } 15 ) 16 17 // 響應攔截器 18 axios.interceptors.response.use( 19 response => { 20 // 對響應數據做點什么,一般是判斷狀態碼，進行一些邏輯處理 21 return response; 22 }, 23 error => { 24 // 對響應錯誤做點什么 25 return Promise.reject(error) ; 26 }; 27 ) 28 29 //GET請求 30 export const $get = function (url, params) { 31 return new Promise((resolve, reject) => { 32 axios({ 33 method: 'get',//請求方式 34 url: url, //請求url 35 headers:... //請求頭設置, 36 params, //請求參數 37 baseURL: ...//基礎地址,將自動加在 `url` 前面 38 }).then(res => { 39 resolve(res) 40 }).catch(error => { 41 reject(error) 42 }) 43 }) 44 } 45 46 //POST請求 47 export const $post = function (url, param) { 48 return new Promise((resolve, reject) => { 49 axios({ 50 method: 'post', 51 url: url, 52 headers: ..., 53 data: param ? param : "", //數據體 54 baseURL: ... 55 }).then(res => { 56 resolve(res) 57 }).catch(error => { 58 reject(error) 59 }) 60 }) 61 } 62 63 //DELETE請求 64 export const $delete = function (url, params) { 65 return new Promise((resolve, reject) => { 66 axios({ 67 method: 'delete', 68 url: url, 69 headers: ..., 70 params, 71 baseURL: ... 72 }).then(res => { 73 resolve(res) 74 }).catch(error => { 75 reject(error) 76 }) 77 }) 78 } 79 80 //PUT請求 81 export const $put = function (url, params) { 82 return new Promise((resolve, reject) => { 83 axios({ 84 method: 'put', 85 url: url, 86 headers: ..., 87 data: params ? params : "", 88 baseURL: ... 89 }).then(res => { 90 resolve(res) 91 }).catch(error => { 92 reject(error) 93 }) 94 }) 95 } View Code

3.接口的封裝---新建user.js

1 //導入請求方式 2 import { 3 $get, 4 $post, 5 $update, 6 $delete 7 } from '../http'; 8 9 //獲取用戶信息接口 10 const getUser = data => { 11 return $get('/api/getUserInfo', data); 12 }; 13 14 //其他接口類似 15 .... 16 .... 17 .... 18 19 //導出接口 20 export default { 21 getUser, 22 ..., 23 ... 24 }

4.封裝所有接口文件---創建index.js

1 //導入接口文件 2 import user from './user' 3 4 //導出 5 export default { 6 user, 7 ..., 8 ... 9 }

5.axios的所有內容封裝（該index.js即為下圖目錄結構選中的js文件）

目錄結構

6.在組件中的使用

1 methods:{ 2 //方法的調用，傳入數據 3 getUser(){ 4 this.$api.user.getUser({userId：100010}) 5 .then( 6 res=>{ 7 //請求結果，進行相應的邏輯處理 8 }, 9 error=>{ 10 //請求失敗后的邏輯處理 11 }) 12 } 13 }

?

轉載于:https://www.cnblogs.com/yy136/p/9855039.html

總結

以上是生活随笔為你收集整理的vue项目中axios的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。