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

    ---后续修改
    一点一滴累积,总有一天你也会成为别人口中的大牛!
  • 相关阅读:
    模型层
    视图层,模板层
    ORM表关系建立
    CMakeList入门
    C++标准模板库
    C++基本语法
    g++应用说明
    Linux快捷键
    Git 操作备忘
    Block的详细介绍
  • 原文地址:https://www.cnblogs.com/fancyLee/p/9629878.html
Copyright © 2011-2022 走看看