Vue-Axios请封装

准备阶段

npm install axios --save 

统一接口文件

common->request->apiconst.js(自行修改,无用的可以去掉)

/**
 * Api 常量配置
 */

//后端ip
export const url_host = 'http://b.test.com:10102';
//后端ip(sso)
export const sso_url_host = 'http://a.test.com:10101';
//登录注册,加密密码
export const  salt="fesdb13632twfs;'." //加密算法-盐

//保存用户信息的key
export const userInfo = 'userInfo';

// 登录认证地址
export const ssoVerifyLogin= sso_url_host+ "/login"

// 登出地址

export const logout= sso_url_host+"/logout"

//是否登录过

export  const  isLogout=sso_url_host+"/isLogout"


/**
 * 后端用户信息获取接口
 *
 */

export const getUser = '/user/getUser';

Axios拦截器,和基础配置

common->request->axiosconfig.js

import axios from 'axios'
import {url_host} from './apiconst'
import  router  from '@/router/index'
/*
  @ 创建自定义axios实例
*/

const instance_ax = axios.create({
    baseURL: url_host,//统一请求
    headers:{},
    timeout: 10000
})


axios.defaults.withCredentials=true; //让ajax携带cookie
/*
  @ request 请求拦截器=>请求发出前处理
*/
instance_ax.interceptors.request.use(
    config => {
        //每次请求都携带token
        config.headers.jwtToken= window.localStorage.getItem("jwtToken")
        //请求前处理
        return config;
    }, error => {
        // 接口返回失败
        Promise.reject(error.response);
    }
)

/*
  @ request 响应拦截器=>处理响应数据
*/
instance_ax.interceptors.response.use(
    response => { //正确

        return Promise.resolve(response);
    },
    error => {//后端报错
        // 如果权限过期或者token伪造的或者token过期了,后端返回401
        if (error.response.status===401) {
            //重定向登录页,并携带原路径
            router.push({
                path: '/login',
                query:{sourceUrl:router.currentRoute.fullPath}
            });
        }
        return Promise.reject(error.response);

    }
)

export default instance_ax;

Axios工具类

import request from './axiosconfig'
export function Get(uri, params) {
    return request({
        url: uri,
        method: 'get',
        params: params
    })
}




export function Post(uri, params) {
    return request({
        url: uri,
        method: 'post',
        data: params
    })
}



// 上传文件
export function PostFile (uri, params)  {
    return request({
        url: uri,
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        params
    });
};


export function Delete(uri, params) {
    return request({
        url: uri,
        method: 'delete',
        params: params
    })
}

export function Put(uri, params) {
    return request({
        url: uri,
        method: 'put',
        data: params
    })
}

使用教程

在vue文件中script标签内添加

import {Get} from "./../common/request/httputil";

然后直接使用就行

    Get("/test/a1",{}).then(res=>{
      this.str=res.data;
      console.log("111122211----")
   }).catch(error=>{
      console.log("error",error)
    })

点赞 -收藏-关注-便于以后复习和收到最新内容 有其他问题在评论区讨论-或者私信我-收到会在第一时间回复 如有侵权，请私信联系我 感谢,配合,希望我的努力对你有帮助^_^