场景类：封装axios

目的

统一管理，调用的时候方便，减少代码冗余

目录结构

• src
  • api/api.js
  • libs/util.js
  • view/test.vue

代码

// api.js
import util from '../libs/util'
// 请求地址从基础路径往后拼接
const API = {
  // post 请求
  postTest (data) {
    return util.ajax.post('/do/add/hotel_feedback', util.transParams(data), util.headersUrlencoded)
  },
  // get 请求
  getTest (data) {
    return util.ajax.get('/do/get_city', {
      responseType: 'json',
      params: data
    })
  }
}
export default API

// util.js
import axios from 'axios'
// 封装axios，baseURL是一个基础路径
const util = {}
util.ajax = axios.create({
  baseURL: '/pfizer-subapp'
})
// 把post原生请求变为formData
util.transParams = (data) => {
  let params = new URLSearchParams()
  for (let item in data) {
    params.append(item, data['' + item + ''])
  }
  return params
}
// 一般用请求头
util.headersUrlencoded = {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}
// 上传文件用请求头
util.headersMultipart = {
  headers: { 'Content-Type': 'multipart/form-data' }
}
// 添加请求拦截器
util.ajax.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
util.ajax.interceptors.response.use(function (res) {
  return res
}, function (error) {
  // 对响应错误做点什么
  // return Promise.reject(error);
});

export default util

// test.vue
import API from '../api/api'
// 组件中调用
API.addFeedback(params).then(res => {})