ios调用restful接口_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的架构风格也是很不错。祝大家周末愉快，杭州下雨:(。。。。