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)
          })

    ---后续修改
    一点一滴累积,总有一天你也会成为别人口中的大牛!
  • 相关阅读:
    HDU 5640 King's Cake
    HDU 5615 Jam's math problem
    HDU 5610 Baby Ming and Weight lifting
    WHU1604 Play Apple 简单博弈
    HDU 1551 Cable master 二分
    CodeForces659C Tanya and Toys map
    Codeforces 960E 树dp
    gym 101485E 二分匹配
    Codeforces 961E 树状数组,思维
    Codeforces Round #473 (Div. 2) D 数学,贪心 F 线性基,模板
  • 原文地址:https://www.cnblogs.com/fancyLee/p/9629878.html
Copyright © 2011-2022 走看看