vue axios 請求攔截和封裝
阿新 • • 發佈：2020-10-23
1、在src下建立目錄utils，在utils下新建檔案request.js
1 //request.js 2 3 import axios from 'axios'; 4 import { Message,Loading } from 'element-ui'; 5 const service = axios.create({ 6 baseURL:process.env.BASE_API, 7 timeout:10000 8 }) 9 let loadingInstance; 10 let options = { //loading 的配置引數 11 lock: true, 12 text: 'Loading', 13 spinner: 'el-icon-loading', 14 background: 'rgba(0, 0, 0, 0.7)' 15 } 16 //請求攔截器 17 service.interceptors.request.use(function(config){ 18 loadingInstance = Loading.service(options);//顯示loading 19 config.data = config.data; //根據後端資料格式，可做相應的資料轉換 JSON.stringify() 或 qs.stringify()20 //設定header的配置資訊，跟後端配合設定 21 // config.headers = { 22 // 'Content-Type':'application/x-www-form-urlencoded' 23 // } 24 25 //設定 token ,根據需要設定 26 // const token = getCookie('token'); 27 // if(token){ 28 // config.params = {'token':token}; 29 // config.headers.token = token;30 // } 31 return config; 32 },function(error){ 33 loadingInstance.close(); 34 return Promise.reject(error) 35 }) 36 37 //響應攔截器 38 service.interceptors.response.use(function(response){ 39 loadingInstance.close(); 40 return response; 41 },function(error){ 42 loadingInstance.close(); 43 if(error || error.response){ 44 switch(error.response.status){ 45 case 400: 46 error.message = '錯誤請求'; 47 break; 48 case 401: 49 error.message = '未授權，請重新登入' 50 break; 51 case 403: 52 error.message = '拒絕訪問' 53 break; 54 case 404: 55 error.message = '請求錯誤,未找到該資源'; 56 window.location.href = '/notFound'; 57 break; 58 case 405: 59 error.message = '請求方法未允許'; 60 break; 61 case 408: 62 error.message = '請求超時'; 63 break; 64 case 500: 65 error.message = '伺服器端出錯'; 66 break; 67 case 501: 68 error.message = '網路未實現'; 69 break; 70 case 502: 71 error.message = '網路錯誤'; 72 break; 73 case 503: 74 error.message = '服務不可用'; 75 break; 76 case 504: 77 error.message = '網路超時'; 78 break; 79 case 505: 80 error.message = 'http版本不支援該請求'; 81 break; 82 default: 83 error.message = `連線錯誤${error.response.status}` 84 } 85 }else{ 86 if(JSON.stringify(error).includes('timeout')){ 87 Message.error('伺服器響應超時，請重新整理當前頁') 88 } 89 error.message('連線伺服器失敗') 90 } 91 92 Message.error(error.message) 93 return Promise.resolve(error.response) 94 }) 95 96 export default service
2、在 utils 目錄下新建檔案http.js
1 //http.js 2 3 import request from './request'; 4 const http = { 5 get(url,params){ 6 const config = { 7 method:'get', 8 url:url 9 } 10 if(params) config.params = params; 11 return request(config) 12 }, 13 post(url,params){ 14 const config = { 15 method:'post', 16 url:url 17 } 18 if(params) config.data = params 19 return request(config) 20 }, 21 put(url,params){ 22 const config = { 23 method:'put', 24 url:url 25 } 26 if(params) config.params = params; 27 return request(config) 28 }, 29 delete(url,params){ 30 const config = { 31 method:'delete', 32 url:url 33 } 34 if(params) config.params = params; 35 return request(config) 36 } 37 } 38 39 export default http
3、在 src 目錄下新建一個api 目錄，並在api目錄下新建檔案 api.js
1 // api.js 2 3 import http from '../utils/http'; 4 let resquest = ''; //http://10.0.0.3:8080/getList.json //請求本地檔案 5 let postUrl ="/postURL/info/supplement"; // http://10.0.0.3:8080/postURL/info/supplement //跨域--代理請求 6 7 //get 請求 8 export function getListAPI(params){ 9 return http.get(`${resquest}/getList.json`,params) 10 } 11 12 //post 請求 13 export function postFormAPI(params){ 14 return http.post(`${postUrl}`,params) 15 } 16 17 //put 請求 18 export function putSomeAPI(params){ 19 return http.put(`${resquest}/putSome.json`,params) 20 } 21 22 //delete 請求 23 export function deleteListAPI(params){ 24 return http.delete(`${resquest}/deleteList.json`,params) 25 }
4、引入並使用api請求介面
1 <script> 2 import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api' //引入api 3 export default{ 4 data(){ 5 return{ 6 7 } 8 }, 9 methods:{ 10 getList(){ 11 //模擬的資料 12 let data = { 13 name:'lisi' 14 } 15 getListAPI(data).then(res =>{ 16 console.log(res) 17 }).catch(err =>{ 18 console.log(err) 19 }) 20 }, 21 postForm(){ 22 //模擬的資料 23 let data = { 24 username:"", 25 telnum:"", 26 } 27 postFormAPI(data).then(res =>{ 28 console.log(res) 29 }).catch(err =>{ 30 console.log(err) 31 }) 32 } 33 } 34 } 35 </script>
5、跨域代理設定---在當前專案下，新建一個vue.config.js 檔案，內容如下：
1 const webpack = require('webpack'); 2 module.exports = { 3 assetsDir: './', 4 publicPath: '/', 5 outputDir: './dist', 6 runtimeCompiler: undefined, 7 productionSourceMap: false, 8 filenameHashing: false, 9 parallel: undefined, 10 css: { 11 extract: false 12 }, 13 devServer: { 14 overlay: { // 讓瀏覽器 overlay 同時顯示警告和錯誤 15 warnings: true, 16 errors: true 17 }, 18 host: "10.0.0.3", 19 port: 8080, // 埠號 20 https: false, // https:{type:Boolean} 21 open: false, //配置後自動啟動瀏覽器 22 hotOnly: true, // 熱更新 23 // proxy: 'http://localhost:8080' // 配置跨域處理,只有一個代理 24 proxy: { //配置多個代理 25 "postURL": { 26 target: "http://218.17.135.100:8089", 27 changeOrigin: true, 28 //ws: true,//websocket支援 29 secure: false, 30 pathRewrite: { 31 "^/postURL": "/" 32 } 33 } 34 } 35 } 36 37 }