Vue——封装axios请求,请求头携带token、cookie,当请求超时再次发送请求

utils/request.js

import axios from "axios";
const instance = axios.create({
  timeout: 8000,//设置网络请求超时时间
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",  //设置传输的数据格式为form data的形式(a=1&b=2),默认是json的形式进行传输的({a:1,b:2})
    "common":{
		"CSRFToken"="token"//全局配置请求头携带token    CSRFToken这个字段是后端告诉你的  token的值是由后端返回的
	}
  },
  withCredentials:true,//全局设置请求头默认携带cookie
  retry: 3 /* 设置请求失败之后重新请求次数 */,
  retryInterval: 10000 /* 设置请求失败之后再次发起请求的间隔 */
});

//设置当数据请求失败的时候再次发起网路请求
instance.interceptors.response.use(undefined, function axiosRetryInterceptor(
  err
) {
  var config = err.config;
  // If config does not exist or the retry option is not set, reject
  if (!config || !config.retry) return Promise.reject(err);

  // Set the variable for keeping track of the retry count
  config.__retryCount = config.__retryCount || 0;

  // Check if we've maxed out the total number of retries
  if (config.__retryCount >= config.retry) {
    // Reject with the error
    return Promise.reject(err);
  }

  // Increase the retry count
  config.__retryCount += 1;

  // Create new promise to handle exponential backoff
  var backoff = new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, config.retryDelay || 1);
  });

  // Return the promise in which recalls axios to retry the request
  return backoff.then(function() {
    return axios(config);
  });
});

const baseURL = "/api";

export function get(url,config) {
  return instance.get(baseURL + url,config);
}

export function post(url, data,config) {
  return instance.post(baseURL + url, data,config);
}

/services/api.js

import { get, post } from "../utils/request";

export function login(data,config) {
  return post("/url/", data,config);
}

export function isLogin(config) {
  return get("/url/",config);
}
export function getData(data,config) {
const {name} = data;
  return get("/url/?name="+name,config);
}

在组件中进行调用

import { login,getData } from "@/services/API";
mounted(){
	login("username=admin&password=111",{
          headers: {
            common: { "CSRFToken": "token" }
          },
          withCredentials:true
        }).then(res=>{console.log(res)}).catch(err=>{console.log(err)});//给单个请求设置请求头携带cookie和token
	getData ({name:111}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})
}
发布了25 篇原创文章 · 获赞 6 · 访问量 820
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览