菜单

vue 组件的包装之基于axios的ajax请求方法

2019年5月24日 - Html/Html5

如下所示:

此版本封装首假若对请求封装,拦截什么的没做管理。重倘使拍卖了请求的办法是post依旧get请求做了管理,新建3个http.js,代码如下:

import Vue from 'vue'

let service = {
 url: 'http://host.xxxxx.com/xxx.php'
}

service.ajaxReuqest = (url, options, type, fileFlag) => {
 for (const i in options) {
 if (!options[i] && options[i] !== 0 && (options[i].length && options[i].length > 0)) {
  delete options[i]
 }
 }
 let promise = new Promise((resolve, reject) => {
 if (fileFlag) {
  Vue.axios.post(url, options, {
  headers: {
   'Content-Type': 'multipart/form-data'
  }
  }).then((res) => {
  resolve(res)
  })
 } else if (type === 'GET') {
  Vue.axios.get(url, { params: options }).then((res) => {
  resolve(res.data.resultObj)
  }).then((err) => {
  reject(err)
  })
 } else {
  Vue.axios.post(url, options).then((res) => {
  resolve(res)
  }).then((err) => {
  reject(err)
  })
 }
 })
 return promise
}
import Qs from 'qs'
import axios from "axios"
axios.defaults.timeout = 15000;

axios.defaults.transformResponse = [function (data) {
  data = JSON.parse(data)
  return data
}]

axios.interceptors.request.use(function(config) {
  console.log("请求开始")
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use((res) => {
  console.log("请求结束 ")
  return res;
}, (error) => {
  return Promise.reject(error);
});

function http(type,url, params,contentType) {
  let contType = contentType=='json' ? 'application/json':'application/x-www-form-urlencoded'
  let paramstranform = contentType == 'json' ? params : Qs.stringify(params)
  if(type == "get"){
    return new Promise((resolve, reject) => {
      // alert("axios-token:::"+localStorage.token)
      axios({
        method:'get',
        url:url,
        headers: {'token' : localStorage.token},
        params:params
      })
      // axios.get(url, { params: params },{headers : {'token' : localStorage.token}})
      .then((res) => {
        resolve(res.data)
      }).catch(err => {
        if (err == "Error: timeout of 15000ms exceeded") {
          console.log("服务器请求超时")
          return
        }
        alert(err)
      })
    })
  }else{
    return new Promise((resolve,reject)=>{
       axios({
        method:'post',
        url:url,
        headers: {'Content-Type': contType},
        data:paramstranform
      })
      // axios.post(url,paramstranform,{headers:{'Content-Type': contType,'token' : localStorage.token}})
      .then((res)=>{
        resolve(res.data)
      }).catch(err=>{
        if(err == "Error: timeout of 15000ms exceeded"){
          alert("服务器请求超时,请刷新页面重新进入")
        }
        alert(err)
      })
    })
  }
}

export default http

援救POST GET请求以及图片上传,基于axios,适用于vue,

在在main.js里引用

以异步获取省份列表作为例子:

import httpRequest from '@/config/http'  具体的地址还有文件名自己改写
Vue.prototype.$http = httpRequest //定义一个全局变量
// 获取省份信息
service.getProvinceList = (options) => {
 return service.ajaxRequest(service.url + '/basic/getProvinceList', options, 'POST')
}


getProvinceList () {
 service.getProvinceList({}).then((res) => {
  this.provinceList = res.data.resultObj.data
 })
}

在文书也许模板文件里使用如下;

以上这篇vue
组件的包裹之基于axios的ajax请求方法便是小编分享给大家的整体内容了,希望能给大家3个参阅,也指望大家多多帮忙脚本之家。

getList(){
        this.$http('post',this.baseUrl+'/tag/theme/list').then((res) => {
           console.log(res)
        });
}

您恐怕感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图