vue+axios 對restful 請求封裝
阿新 • • 發佈:2018-12-19
參數 文件 分類 http 商品 type == 技術棧 set
禮拜天來公司整理項目,項目是最近開始重構的,裏面的各種http請求接口是restful結構的(為了提升項目的比格),整理一下筆記
[restful介紹][1]博主講的很詳細
技術棧: vue + vuex + element-ui + axios
import axios from ‘axios‘ import store from ‘../vuex/store‘ import { Message } from ‘element-ui‘ // axios 配置 axios.defaults.timeout = 5000 axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘ axios.defaults.headers.common[‘X-Requested-With‘] = ‘XMLHttpRequest‘ // POST傳參序列化 axios.interceptors.request.use((config) => { // 單個網站的admin用戶 config.headers.common[‘Gw-Admin-Access-Token‘] = store.getters.adminAccessToken // 整個網點user config.headers.common[‘Gw-User-Access-Token‘] = store.getters.userAccessToken return config }, (err) => { Message.error(‘參數錯誤‘) return Promise.reject(err) }) // 返回狀態判斷 axios.interceptors.response.use((res) => { const response = res.data if (response.msg) { if (response.code === 0) { Message.success(response.msg) } else { Message.error(response.msg) } } return response }, (err) => { if (err && err.response) { switch (err.response.status) { case 401: Message.error(‘未授權,請登錄‘) window.location.href = ‘/#/auth/login‘ break case 404: Message.error(‘接口請求異常: ‘ + err.response.config.url + ‘, 請重試‘) break default: Message.error(‘Oops, 出錯啦‘) } } return Promise.reject(err) }) export default function request (method, url, data) { // 處理請求的url和數據 data = method === ‘get‘ ? { params: data } : data // 發送請求 return new Promise((resolve, reject) => { axios[method](url, data) .then(response => { resolve(response) }, error => { reject(error) }) .catch(error => { reject(error) }) }) .catch(error => { console.log(error) }) }
封裝好的axios請求如下:
1.在相應的api文件中定義方法(如下是goods中的刪除商品分類的方法)
delCatList (data) {
return Request(‘delete‘, API.GOODS.GOODS_CAT + ‘/‘ + data) //其它的操作將對應的delete換成(put、post、get、delete)即可
},
2.在需要的vue界面調用
首先:import Goods from ‘@/fetch/request/goods‘
methods方法:
Goods.addCatList(data).then(res => { if (res.code === 0) { console.log(res) } })
這裏由於封裝的時候將axios封裝為Promise對象 ,所以可以直接使用.then(),res即為接口返回的結果,代碼簡介了不少
[Promise對象--阮一峰][2]
總得來說,一次封裝,永久收益,哈哈,體驗還是不錯的,restful的架構風格也是很不錯。祝大家周末愉快,杭州下雨:(。。。。
來源:https://segmentfault.com/a/1190000016146893
vue+axios 對restful 請求封裝