vue+axios 对restful 请求封装
礼拜天来公司整理项目,项目是最近开始重构的,里面的各种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的架构风格也是很不错。祝大家周末愉快,杭州下雨:(。。。。
相关推荐
84560296 2020-06-10
Eiceblue 2020-08-02
ahnjwj 2020-07-28
playis 2020-06-28
playis 2020-06-16
ahnjwj 2020-06-12
84560296 2020-06-09
84560296 2020-06-08
84560296 2020-05-30
81901836 2020-05-26
beibeijia 2020-05-16
85291545 2020-05-01
84560296 2020-04-10
fanix 2020-04-09
bapinggaitianli 2020-04-07
84560296 2020-03-27
85291545 2020-03-26
82911731 2020-03-25