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)
      }
    )
  • 相关阅读:
    背水一战 Windows 10 (61)
    背水一战 Windows 10 (60)
    背水一战 Windows 10 (59)
    背水一战 Windows 10 (58)
    背水一战 Windows 10 (57)
    背水一战 Windows 10 (56)
    背水一战 Windows 10 (55)
    背水一战 Windows 10 (54)
    背水一战 Windows 10 (53)
    背水一战 Windows 10 (52)
  • 原文地址:https://www.cnblogs.com/chen-yi-yi/p/11238297.html
Copyright © 2011-2022 走看看