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

    ---后续修改
    一点一滴累积,总有一天你也会成为别人口中的大牛!
  • 相关阅读:
    jquery 自执行笔记
    快速搭建动态web工程并且进行数据库交互页面呈现
    仿途牛导航
    一些jquery技巧
    Jquery 事件冒泡 以及阻止默认事件
    absolute(绝对定位)和 relative(相对定位)
    java 日期格式转换,加减等
    StringTokenizer 简单的描述
    运算符和表达式
    Eclipse常用命令+ 简单的自动售票程序
  • 原文地址:https://www.cnblogs.com/fancyLee/p/9629878.html
Copyright © 2020-2023  润新知