zoukankan      html  css  js  c++  java
  • axios封装

    封装axios.js

    import axios from 'axios'
    
    axios.defaults.widthCredentials = true;
    axios.defaults.crossDomain = true;
    axios.defaults.timeout = 1000;
    axios.defaults.baseURL ='url';
    axios.defaults.headers.post['Content-Type'] = 'applicantion/json;charset=UTF-8';
    axios.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8';
    axios.defaults.headers.common['Authorization'] = ''+Cookies.get(tokenKey); // 设置请求头为 Authorization
    //加载动画显示 //创建axios实例 let util = {};
    let baseURl = process.env.
    VUE_APP_BASE_API;
    util.ajax = axios.create({
      baseURL: baseURl, //api的base_url 
      timeout: 30000
    });
    //request 拦截器
    util.ajax.interceptors.request.use( config =>{
        return config;
    },error => {
        return Promise.reject(error);
    })
    // response 拦截器
    util.ajax.interceptors.response.use( response =>{
        if(laoding){
            loading.close();
        }
        if(response.data.code === '401'){
            console.log('response----------', response);
            //全局登陆过滤,当判读token失效或者没有登录时 返回登陆页面
            return false;
        }
        return Promise.resolve(response);
    }, error =>{
        loading.close();
      //弹窗提示错误信息
    return Promise.reject(error) }) export default { /* * get方法,对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ get (url, params) { return new Promise( (resolve, reject) =>{ util.ajax.get(url, {params: params}, { headers: { 'Authorization': '' + getToken('Token'), 'token': getToken('Token') } }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) }, /** * post方法,对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ post (url, params) { return new Promise((resolve, reject) => { util.ajax.post(url, params, { headers: { 'Authorization': '' + getToken('Token'), } }) .then(res => { resolve(res.data) }) .catch(err => { reject(err) }) }) } }

    引用axios.js,定义接口

    import request from '@/api/axios'
    
    export function login (params) {
      return request.post('/user/login', params)
    }
    export function getUserAll (params) {
      return request.get('/user/getall', params)
    }

    页面使用方法

    login(userinfo).then(res => {
        console.log(res)
        setToken('Token', res.token)
        this.$router.push({path: '/'})
    })
  • 相关阅读:
    paip.提升用户体验论文本编辑器的色彩方案
    paip.c++ qt 项目工程互相引用的方法
    paip.提升用户体验=c++ qt 字体切换功能缺少的总结..
    paip.提升用户体验自定义<<移位操作符重载
    paip.提升用户体验c++ gcc 命令语法着色搭配方案
    paip.c++ 指针跟引用的区别.
    paip.c++ qt 目录遍历以及文件操作
    paip. c++ 调用.net dll 最好方式powershell 使用总结.
    paip.提升用户体验c++ 源码字体自定义制造总结
    paip.提升用户体验c++ Qt5 实现程序图标以及动态托盘闪烁图标
  • 原文地址:https://www.cnblogs.com/llllpzyy/p/13912497.html
Copyright © 2011-2022 走看看