vue封装axios请求

import axios from 'axios';
import router from '@/router';
import NProgress from 'nprogress';
import qs from "qs";

let $http = axios.create({
  baseURL: process.env.baseURL,
  withCredentials: true,
  timeout: 10000,
  validateStatus: function (status) {
    switch (status) {
      case   200:
        return status;
      case   204:
        return status;
      case   401:
        // 未登录
        router.push({path: '/login'});
        Promise.reject('未登录 或 登录已过期');
        break;
      case   403:
        // 未登录
        router.push({path: '/403'});
        Promise.reject('无权访问接口');
        break;
      case   404:
        Promise.reject('404 资源路径错误');
        break;
      default:
        Promise.reject('未处理的status 请检查app.js 中的 checkStatus方法');
    }
  }
});

/* 请求前 拦截器 */
$http.interceptors.request.use(config => {
  NProgress.start();
  return config;
}, error => {
  return error;
});

/* 响应 拦截器 */
$http.interceptors.response.use(response => {
  NProgress.done();
  // NProgress.remove();
  return Promise.resolve(response.data);
}, error => {
  NProgress.done();
  return Promise.reject(error);
});

$http.postForm = function (url, data, config) {
  if (!config) {
    config = {}
  }
  if (!config['headers']) {
    config['headers'] = {}
  }
  if (!config['headers']['Content-Type']) {
    data = qs.stringify(data);
    config['headers']['Content-Type'] = "application/x-www-form-urlencoded"
  }
  return $http.post(url, data, config);
};

export default $http;

请求示例

this.$http.get(url, {params: params}).then.then(({code, msg, data}) => {//do something });
this.$http.post(url, {params: params}).then.then(({code, msg, data}) => {//do something });
this.$http.postForm(url, {params: params}).then(({code, msg, data}) => {//do something });
Vue.js 开发中,封装 Axios 请求是一种常见的做法,通常是为了简化全局的 API 调用,避免在每个组件中都重复引入 Axios 并设置相同的配置。以下是创建一个简单的 Axios 封装实例: ```javascript import axios from 'axios'; import { MessageBox } from 'element-ui'; // 创建一个 Vue 插件 export default { install(Vue) { // 创建一个 Vue 实例的方法 Vue.prototype.$axios = axios.create({ baseURL: process.env.BASE_API, // 当前应用的基础URL timeout: 5000, // 设置默认超时时间 headers: { 'Content-Type': 'application/json', // 默认请求头 }, }); // 添加全局错误处理 Vue.prototype.$httpError = (error) => { if (error.response) { console.log(error.response.data); MessageBox.error(error.response.data.message || error.response.status); } else { console.error('未知错误', error); } }; // 错误拦截器 Vue.prototype.$axios.interceptors.response.use( response => response, error => { this.$httpError(error); return Promise.reject(error); } ); // 请求拦截器 Vue.prototype.$axios.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 this.$httpError(error); return Promise.reject(error); } ); }, }; ``` 通过这种方式,你在 Vue 组件中就可以像下面这样轻松地发送请求了: ```vue methods: { fetchData() { this.$axios.get('/api/data').then(response => { // 处理成功响应 }).catch(this.$httpError); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值