vue中axios的统一封装及调用

Posted 2021-01-21 1955

一、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: "确定"
                });
              }
            });