zoukankan      html  css  js  c++  java
  • vue中的axios封装

    import axios from 'axios';

    import { Message } from 'element-ui';

    axios.defaults.timeout = 5000;
    axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded'}

    axios.defaults.withCredentials = true

    //http request 拦截器
    axios.interceptors.request.use(
      config => {
        // const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
        config.data = JSON.stringify(config.data);
        // if(token){
        //   config.params = {'token':token}
        // }
        return config;
      },
      error => {
        return Promise.reject(err);
      }
    );
    //http response 拦截器
    axios.interceptors.response.use(
      response => {
        if(response.data.errCode ==2){
          router.push({
            path:"/login",
            querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
          })
        }
        return response;
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    
    /**
     * 封装get方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    export function fetch(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 data
     * @returns {Promise}
     */
    
     export function post(url,data = {}){
       return new Promise((resolve,reject) => {
         axios.post(url,data)
              .then(response => {
                resolve(response.data);
              },err => {
                reject(err)
              })
       })
     }
    
     /**
     * 封装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 axios from 'axios'
    import {post,fetch,patch,put} from './utils/http'
    //定义全局变量
    Vue.prototype.$post=post;
    Vue.prototype.$fetch=fetch;
    Vue.prototype.$patch=patch;
    Vue.prototype.$put=put;

    接口调用
        this.$fetch('/api/v2/movie/top250')
          .then((response) => {
            console.log(response)
          })

    ---后续修改
    一点一滴累积,总有一天你也会成为别人口中的大牛!
  • 相关阅读:
    浩然战法--黄金柱选股
    《含泪活着》主人公一一丁尚彪,叙述在日本当黑户口的危险经历,美国《世界日报》2017年3月16日连载
    Java8与JDK8和JDK1.8有什么区别?
    ThreadLocal
    什么是jsonp
    Java中比较对象大小的两种实现方式
    MySQL教程之concat以及group_concat的用法
    多级树形结构和sql查询实现
    mysql树形结构递归查询
    Maven配置教程
  • 原文地址:https://www.cnblogs.com/fancyLee/p/9629878.html
Copyright © 2011-2022 走看看