VUE 封装axios 接口

1.首先安装axios ,推荐项目局部安装   

npm i -D axios

　　

2.创建两个文件http.js、api.js  

import axios from 'axios'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '' // 开发环境
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '' // 调试环境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = '' // 生产环境
}
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    // const token = this.$store.state.Authorization
    // token && (config.headers.Authorization = token)
    // return config
    if (localStorage.getItem('Authorization')) {
          config.headers.Authorization = localStorage.getItem('Authorization');
        }
    return config;
  },
  error => {
    return Promise.error(error)
  })

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          this.$router.replace({
            path: '/Login',
            query: { redirect: this.$router.currentRoute.fullPath }
          }) 
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          this.$toast({
            message: '登录过期，请重新登录',
            duration: 1000,
            forbidClick: true
          })
          // 清除token
          localStorage.removeItem('Authorization')
          this.$store.commit('changeLogin', null)
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            this.$router.replace({
              path: '/Login',
              query: {
                redirect: this.$router.currentRoute.fullPath
              }
            })
          }, 1000)
          break;
        // 404请求不存在
        case 404:
          this.$toast({
            message: '网络请求不存在',
            duration: 1500,
            forbidClick: true
          })
          break;
        // 其他错误，直接抛出错误提示
        default:
          this.$toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          })
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

//  * post方法，对应post请求 form-data方式
  //  * @param {String} url [请求的url地址]
  //  * @param {Object} params [请求时携带的参数]
  //  *conf [请求时loading,默认不传，传递后接口显示loading动画]
  function postForm(url, params) {
    url =baseUrl + url
    return new Promise((resolve, reject) => {
     
      axios({
        method: "post", //请求方式
        url: url, //请求地址
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: params
        // this.formDate
      })
        .then(res => {
          resolve(res);
          // if (conf.lock) {
          setTimeout(() => {
            // hideLoading();
          }, 500);
          // }
        })
        .catch(err => {
          reject(err);
          // if (conf.lock) {
          //   hideLoading();
          // }
        });
    });
  }
  
  export { get, post, postForm };


// /**
//  * put方法，对应put请求
//  * @param {String} url [请求的url地址]
//  * @param {Object} params [请求时携带的参数]
//  */
// export function put(url, params) {
//     Url =baseUrl+url;
//     return new Promise((resolve, reject) => {
//         axios({
//             method: "put",
//             url: Url,
//             params: params,
//             headers: { token: token }  //如果需要添加请求头可在这写
//         })
//             .then(res => {
//                 resolve(res);
//                 // Loading.service(true).close();
//                 //  Message({message: '请求成功', type: 'success'});
//             })
//             .catch(err => {
//                 reject(err)
//                 // Loading.service(true).close();
//                 Message({message: '加载失败', type: 'error'});
//             })
//     });
// }
 
 
// /**
//  * delete
//  * @param {String} url [请求的url地址]
//  * @param {Object} params [请求时携带的参数]
//  */
// export function deletefn(url, params) {
//     Url =baseUrl+url;
//     return new Promise((resolve, reject) => {

//         axios({
//             method: "delete",
//             url: Url,
//             params: params,
//             headers: { token: token }  //如果需要添加请求头可在这写
//         })
//             .then(res => {
//                 resolve(res);
//                 // Loading.service(true).close();
//                 //  Message({message: '请求成功', type: 'success'});
//             })
//             .catch(err => {
//                 reject(err)
//                 // Loading.service(true).close();
//                 Message({message: '加载失败', type: 'error'});
//             })
//     });
// }

app.js  定义接口

import { get, post } from './http'
export const api1 = p1 => get(url, p1)
export const api3 = p => post(url, p)

3.页面引用 。 应用到组件

import {getItemReportList,submitAdd,getItemTypeTree,deleteItemReport} from "../axios/brand";

   //获取报备状态
    // let param={code:"002"}
    // getItemTypeTree(param).then(res => {
    //     // console.log("获取报备状态:",res);
    //     this.optionsfour.push({label:"全部",value:null});
    //     for (var i = 0; i < res.data.length; i++) {
    //       this.optionsfour.push({
    //         value: res.data[i].code,
    //         label: res.data[i].name
    //       });
    //     }
    // })