LaughingZhu's Blog
LaughingZhu
Make or miss win or lose I put my name on it
管理
文章
Comment

vue+axios 对RESTful 请求封装

LaughingZhu
February 27, 2021
293 views
1888 words
No comments

RESTful介绍 阮老师讲的蛮好的,此文章是结合我之前公司的项目来总结的
技术栈: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换成(putpostgetdelete)即可
}


  1. 在需要的Vue界面调用:

// 首先:import Goods from '@/fetch/request/goods', methods的调用方法:

Goods.addCatList(data).then(res => {
    if (res.code === 0) {
        console.log(res)
     }
 })

//这里由于封装的时候将axios封装为Promise对象 ,所以可以直接使用.then(res => {}) 来对请求结果进行处理,这样调用的时候代码就精简了很多




总得来说,一次封装,永久收益,哈哈,体验还是不错的,restful的接口风格也是很不错。
Popular artivles
Blog Info
Posts Num
Comments Num
0
Operating Days
NaN M NaN D
Last activity
Invalid Date