vue项目中ajax请求方法配置

1.首先项目中安装axios和qs依赖包
npm install axios --save
npm install qs --save

2.配置ajax.js文件

import axios from 'axios'//引入axios
let qs = require('qs')//引入qs模块

let errorMsg = {
  '400':'系统繁忙,请稍后再试',
  '403':'无该功能权限',
  '410':'重复请求',
  '500':'网络异常,请稍后再试',
}


// if (localStorage['token'] !== null) {
//   axios.defaults.headers.common['token'] = localStorage['token'];
// }
axios.defaults.headers.common['platform'] = "g";
axios.defaults.headers.common['cid'] = localStorage['cid'];

let api = {
  post: function(url, param, type = 'init') {
    let headers = {}
    if (type === 'md') {
      headers['ERPSignSecret'] = param.md
      headers['ERPVersion'] = 'V2'
      headers['PlatForm'] = 11
      delete param.md
    }
    return axios
      .post(url, qs.stringify(param), { headers: headers })
      .then(res => {
        return res
      })
  },
  postJSON: function(url, param) {
    let jsonParam = JSON.stringify(param)
    console.log(jsonParam)
    let headers = {
      post: {}
    }
    headers.post['Content-Type'] = 'application/json'
    return axios.post(url, jsonParam, { headers: headers }).then(res => {
      return res
    })
  },
  putJSON: function(url, param) {
    let jsonParam = JSON.stringify(param)
    let headers = {
      put: {}
    }
    headers.put['Content-Type'] = 'application/json'
    return axios.put(url, jsonParam, { headers: headers }).then(res => {
      return res
    })
  },
  get: function(url, param, type = 'init') {
    let headers = {}
    if (type === 'pt') {
      headers['platform'] = 'g'
    }
    return axios.get(url,{ headers: headers ,params:param}).then(res => {
      return res
    })
  },
  delete: function(url, param) {
    return axios
      .delete(url, {
        params: param
      })
      .then(res => {
        return res
      })
  },
  put: function(url, param) {
    return axios.put(url, qs.stringify(param)).then(res => {
      return res
    })
  }
}
export { api,errorMsg }

3.配置main.js文件

import {
  api,
  errorMsg
} from '@/assets/JS/ajax'
Vue.prototype.$ajax = api   //将配置的ajax请求方法绑定到vue原型上
Vue.prototype.$error = errorMsg

4.在vue文件中使用时

//url是接口地址
this.$ajax.get(url, param).then(res => {
    res = res.data;
    if (res.status === 200) {
    	this.selector = res.data;
    }
}).catch(error => {
    this.handleError(error);
});

你可能感兴趣的:(vue项目中ajax请求方法配置)