码迷,mamicode.com
首页 > 移动开发 > 详细

vue中axios的统一封装及调用

时间:2018-11-19 12:31:06      阅读:1442      评论:0      收藏:0      [点我收藏+]

标签:turn   ==   fun   ade   col   实例   timeout   else   class   

一、axios.js

1、安装axios

npm install axios --save

2、环境地址(config.js)

export default {
  // server: ‘http://localhost:8080‘ // 本地后台接口地址
  // server: ‘http://10.2.22.88:8080‘ // 开发环境后台接口地址
  server: ‘‘ // 正式环境后台接口地址
}

 

2、引用

import axios from ‘axios‘
import {Message} from ‘element-ui‘
import config from ‘../config/config.js‘  //环境地址
import qs from ‘qs‘

3、创建axios实例

const axios = axios.create({
  baseURL: config.server, // 本地环境地址
  timeout: 3000, // 请求超时时间,3000ms未响应则停止请求
  withCredentials: true, // 允许携带cookie
  responseType: ‘json‘,
  headers: {‘Content-Type‘: ‘application/json‘}
})

4、axios请求拦截器

axios.interceptors.request.use(function (config) {
  // 发送请求之前做一些处理
  return config;
}, function (error) {
  // 当请求异常时做一些处理
  // 弹出错误消息
  Message({
        message: error.message,
        type: ‘error‘,
        duration: 5 * 1000
    })
  return Promise.reject(error);
});

5、axios 响应拦截器

axios.interceptors.response.use(function (response) {
  // 返回响应时做一些处理
  //判断返回状态
  if (response.status === 200) {
       //逻辑处理
      }
   } else {
    // 非200状态的处理
     Message({
       message: response.statusText,
       type: ‘error‘,
       duration: 5 * 1000
     })
   }
   return response;
}, function (error) {
  // 当响应异常时做一些处理
  Message({
        message: error.message,
        type: ‘error‘,
        duration: 5 * 1000
  })
  return Promise.reject(error);
});

二、api.js

调用

export const requestLogin = params =>
{
  return axios.post(`/remote/login`, params).then(res => res.data);
};

三、界面调用


            this.logining = true;
            var loginParams = { 
username: this.ruleForm2.account,
password: this.ruleForm2.checkPass
}; requestLogin(loginParams).then(data => { this.logining = false; if (code == 200) { this.$message({ message: ‘成功‘, type: ‘error‘ }); } else { this.$alert(res.message, "错误", { confirmButtonText: "确定" }); } });

 

vue中axios的统一封装及调用

标签:turn   ==   fun   ade   col   实例   timeout   else   class   

原文地址:https://www.cnblogs.com/1955/p/9982138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!