vue规范封装ajax请求例子

// 请求java接口的配置
import axios from "axios"
import { Message } from "element-ui"
import qs from "qs"

const instance = axios.create({
  timeout: 10000,
});

// 请求拦截
instance.interceptors.request.use(config => {
  //可以在此处添加一个获取本地token添加在头部
  //const token = sessionStorage.getItem("token");
  //token && (config.headers.Authorization = token);
  return config;
}, err => {
  return Promise.reject(err);
})

// 响应拦截
instance.interceptors.response.use((response) => {
  const res = response.data
  // 如果服务器的状态码不为200，说明请求异常，应给出错误提示。
  if (res.code !== 200) {
    //这里可以根据返回为401进行跳转到登录位置，也同时需要考虑返回的为二进制流的时候没有code等字段判断
    Message({
      message: res.status_desc,
      type: 'error',
      duration: 2 * 1000
    })
    return Promise.reject(new Error(res.status_desc || 'Error'))
  } else {
    return res
  }
}, (err) => {
  Message({
    message: err.message,
    type: 'error',
    duration: 2 * 1000
  })
  return Promise.reject(err)
})

let requestJava = {
  get: function(url, params = {}) {
    return new Promise((resolve, reject) => {
      instance({
        url,
        method: 'get',
        params,
        paramsSerializer: function(params) {
          return qs.stringify(params)//后台接收到的为[1,2,3]这种形式
        }
      }).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  post: function(url, data) { // 用于application/json
    return new Promise((resolve, reject) => {
      instance({
        url,
        method: 'post',
        data,
        transformRequest: function(data) {
          return JSON.stringify(data)//后台接收到的为1，2，3这种形式
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        }
      }).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  post1: function(url, data) { // 用于application/x-www-form-urlencode
    return new Promise((resolve, reject) => {
      instance({
        url,
        method: 'post',
        data,
        transformRequest: function(data) {
          return qs.stringify(data)
        },
      }).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default requestJava

扩展：

• 发送的请求为接收二进制流的时候：以前处理二进制流请求
• qs.stringify()是什么？ 将对象 序列化成URL的形式，以&进行拼接，里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。在开发中，发送请求的入参大多是一个对象。在发送时，如果该请求为get请求，就需要对参数进行转化。使用该库，就可以自动转化，而不需要手动去拼接。更多参考
• axios默认的content-type是application/json。如果使用的qs进行序列化那么content-type就是application/x-www-form-urlencoded也就是常说的表单提交。