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

點贊 -收藏-關注-便于以后復習和收到最新內容有其他問題在評論區討論-或者私信我-收到會在第一時間回復如有侵權，請私信聯系我感謝,配合,希望我的努力對你有幫助^_^

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/335187.html

標籤：其他

上一篇：HarmonyOS：Text + ListDialog實作類似安卓ExpandableListView的效果（簡易版）

下一篇：Android R input (四) 之 InputChannel之發送事件處理反饋