zoukankan      html  css  js  c++  java
  • axios 请求二次封装

    /**
     * 封装get方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    export function get(url, params) {
      return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
          })
          .then(response => {
            resolve(response.data);
          })
          .catch(err => {
            reject(err)
          })
      })
    }
    
    
    /**
     * 封装post请求
     * @param url
     * @param params
     * @returns {Promise}
     */
    
    //  Form Data
    //  headers: {
    //    "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
    //  }
    
    // Form Data   Request payload
    //当headers为 json时是 request 方式发送请求 但是如果你们的后台是formData的方式接口 就传一个header进来 就可以 formData 需要qs序列化
    //因为我们后台是json接受的比较多 所以json在我这里是默认 可以根据自己的情况修改 这个需要json转字符串不然是乱码的
    export function post(url, params = {}, headers) { return new Promise((resolve, reject) => { if (headers == undefined) { axios.post(url, JSON.stringify(params), { headers: { "Content-Type": "application/json;charset=UTF-8" } }) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) } else { axios.post(url, QS.stringify(params), headers) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) } }); }

    /**
     * 封装patch请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    export function patch(url, data = {}) {
      return new Promise((resolve, reject) => {
        axios.patch(url, data)
          .then(response => {
            resolve(response.data);
          }, err => {
            reject(err)
          })
      })
    }
    
    /**
     * 封装put请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    export function put(url, data = {}) {
      return new Promise((resolve, reject) => {
        axios.put(url, data)
          .then(response => {
            resolve(response.data);
          }, err => {
            reject(err)
          })
      })
    }
    
    
    
     
    main.js中 
    import {
      post,
      get,
      patch,
      put,
    } from './assets/utils/http'
    
    
    //定义全局变量
    Vue.prototype.$post = post;
    Vue.prototype.$get = get;
    Vue.prototype.$patch = patch;
    Vue.prototype.$put = put;

     使用

    this.$get("/role/getAllRole",{}).then(res => {});
    this.$post("/judge/editJudgeInfoRole", {
            oid: this.rowData.oid,
            roleid: this.roleid
          }).then(res => {});

    拦截

    全部代码

    import axios from 'axios'
    import QS from "qs"
    import store from "@/store/index"
    import router from '@/router/index'
    import { mapState, mapMutations } from "vuex";
    import {
      Message
    } from 'element-ui';
    axios.defaults.timeout = 10000;
    axios.defaults.baseURL = process.env.API_ROOT;
    
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    axios.defaults.headers.common['Authorization'] = store.state.token ? store.state.token : localStorage.token;
    
    axios.interceptors.request.use(
      config => {
        config.headers = {
          'Authorization': store.state.token ? store.state.token : localStorage.token
        }
        return config;
      },
      error => {
        return Promise.reject(err);
      }
    );
    
    
    //http response 拦截器
    axios.interceptors.response.use(
      response => {
        
    
      },
      error => {
        return Promise.reject(error)
      }
    )
  • 相关阅读:
    C# 实现 Snowflake算法生成唯一性Id
    kafka可视化客户端工具(Kafka Tool)的基本使用(转)
    docker 安装kafka
    Model类代码生成器
    使用docker 部署rabbitmq 镜像
    Vue 增删改查 demo
    git 提交代码到库
    Android ble蓝牙问题
    mac 配置 ssh 到git (Could not resolve hostname github.com, Failed to connect to github.com port 443 Operation timed out)
    okhttp
  • 原文地址:https://www.cnblogs.com/chen-yi-yi/p/11238297.html
Copyright © 2011-2022 走看看