zoukankan      html  css  js  c++  java
  • axios另类封装

    import axios from 'axios'
    import {
      bus
    } from '../bus.js'
    
    axios.defaults.withCredentials = true;
    // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    //  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头
    // axios.defaults.headers.post['Content-Type'] =  'application/x-www-form-urlencoded'
    
    //添加一个请求拦截器
    axios.interceptors.request.use(
      config => {
        if (window.localStorage.getItem('access-token')) {
          config.headers.Authorization = window.localStorage.getItem('access-token');
        }
        store.state.loading = true
        return config
      },
      error => {
        return Promise.reject(error)
      }
    );
    // 添加一个响应拦截器
    axios.interceptors.response.use(function (response) {
      store.state.loading = false
      if (response.data && response.data.code) {
        if (parseInt(response.data.code) === 401) {
          //未登录
          bus.$emit('goto', '/login')
        }
      }
    
      return response;
    }, function (error) {
      store.state.loading = false
      // Do something with response error
      return Promise.reject(error);
    });
    
    //基地址
    let base = process.env.API_ROOT
    
    
    //通用方法
    export const POST = (url, params) => {
      return axios.post(`${base}${url}`, params).then(res => res.data)
    }
    
    //上传
    export const POST_UPLOAD_FILE = (url, params) => {
      var instance = axios.create({
        baseURL: `${base}`,
        timeout: 5000,
        headers: { "Content-Type": "multipart/form-data" }
      });
      return instance.post(`${url}`, params).then(res => res.data);
    }
    
    
    //登录
    export const POST_LOGIN = (url, params) => {
      var instance = axios.create({
        baseURL: `${base}`,
        timeout: 5000,
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
      })
      return instance.post(`${url}`, params).then(res => res.data);
    }
    
    export const GET = (url, params) => {
      return axios.get(`${base}${url}`, {
        params: params
      }).then(res => res.data)
    }
    
    export const GETByConfig = (url, params) => {
      return axios.get(`${base}${url}`,
        params).then(res => res)
    }
    
    export const PUTByConfig = (url, params,config) => {
      return axios.put(`${base}${url}`,
        params,config).then(res => res)
    }
    export const PUT = (url, params) => {
      return axios.put(`${base}${url}`, params).then(res => res.data)
    }
    
    export const DELETE = (url, params) => {
      return axios.delete(`${base}${url}`, {
        params: params
      }).then(res => res.data)
    }
    
    export const PATCH = (url, params) => {
      return axios.patch(`${base}${url}`, params).then(res => res.data)
    }

    API编写【根据请求地址不同,进行归类】:

    import * as API from './'
    
    
    export default{
    getData:params=>{ return API.GET("后台给的请求地址", params) }

    login: params => {
    return API.POST_LOGIN('/api-admin/oauth/token?'+ params)
    },
    API.GET("/admin/system/a16SysDict/getInfoByType/" + type)
    return API.GET("/admin/system/permission/getPermisssList?id=" + id)
    getPermisssList: id => {
    return API.GET("/admin/system/permission/getPermisssList?id=" + id)
    },
    
    
    getData:id=>{
        return API.GET("后台给的请求地址/" + id)
      }
     }

    使用:

    import API from  “API地址"
    
    testGetData(){
        let params  = {};
        API.getData(params).then(result=>{
            if(result.code === 0){
             //代码块
    }
        },
        err=>{
           this.$message.error({
                message: err.toString(),
                duration: 2000
              });
        }
    ).catch(error=>{
      this.$message.error({
              message: "请求出现异常",
              duration: 2000
            });
    })
    }
    

      

  • 相关阅读:
    The user specified as a definer ('root'@'%') does not exist
    Linux安装卸载查看vsftpd
    【数据分析】算法+Echarts小练
    【leecode】小练习(简单8题)
    路飞学城Python-Day171
    【路飞学城Day170】算法小结
    【路飞学城第七模块考核】
    【leecode】独特的电子邮件地址
    【leecode】宝石与石头
    路飞学城Python-Day153
  • 原文地址:https://www.cnblogs.com/0520euv/p/12182987.html
Copyright © 2011-2022 走看看