为了账号安全,请及时绑定邮箱和手机立即绑定

vue:axios二次封装,接口统一存放

2018.07.01 11:21 11609浏览

一、基于框架:vue
二、基于http库:axios
三、基本用法:
    1.通过node安装:

npm install axios

    2. 在项目目录的src文件夹下新建providers文件夹,在该文件夹内新建http-service.js文件,内容如下代码块:

import axios from 'axios';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://www.baidu.com'; //填写域名//http request 拦截器axios.interceptors.request.use(  config => {
    config.data = JSON.stringify(config.data);
    config.headers = {      'Content-Type':'application/x-www-form-urlencoded'
    }    return config;
  },
  error => {    return Promise.reject(err);
  }
);//响应拦截器即异常处理axios.interceptors.response.use(response => {    return response
}, err => {    if (err && err.response) {      switch (err.response.status) {        case 400:            console.log('错误请求')          break;        case 401:            console.log('未授权,请重新登录')          break;        case 403:          console.log('拒绝访问')          break;        case 404:          console.log('请求错误,未找到该资源')          break;        case 405:          console.log('请求方法未允许')          break;        case 408:          console.log('请求超时')          break;        case 500:          console.log('服务器端出错')          break;        case 501:          console.log('网络未实现')          break;        case 502:          console.log('网络错误')          break;        case 503:          console.log('服务不可用')          break;        case 504:          console.log('网络超时')          break;        case 505:          console.log('http版本不支持该请求')          break;        default:          console.log(`连接错误${err.response.status}`)
      }
    } else {      console.log('连接到服务器失败')
    }    return Promise.resolve(err.response)
})/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */export function fetch(url,params={}){  return new Promise((resolve,reject) => {
    axios.get(url,{      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 } /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */export function patch(url,data = {}){  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
} /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */export function put(url,data = {}){  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}/**
* 下面是获取数据的接口
*//** 
* 测试接口
* 名称:exam
* 参数:paramObj/null
* 方式:fetch/post/patch/put
*/export const server = {    exam: function(paramObj){        return post('/api.php?ac=v2_djList',paramObj);
    }
}

    3.在main.js内引用以上的http-service.js文件:

import {server} from './providers/http-service'//定义全局变量Vue.prototype.$server=server;

四、测试用例

export default {  methods:{  
    exam: function(){      let paramObj = {        uid: '123456'
      }      this.$server.exam(paramObj).then(data => {        console.log(data)
      })
    }
  }
}

在网友们写的封装方法基础上做了一些修改,目前在自己的项目组件化中使用,有写的不对的地方欢迎大家留言指出~



作者:Lucia_Huang
链接:https://www.jianshu.com/p/9077baa9d543

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消