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