axios 请求封装--含不限个数传请求头参数的方法

请求

 

 

 

请求调用

 

 

request.js

import { Spin } from "ant-design-vue"
import axios from "axios";

import { getToken } from "../utils/settoken";
import { message } from "ant-design-vue";
import router from '../router/index'

const ConfieBaseUrl = 'https://weiweixiao.cn/';
// const ConfieBaseUrl   = 'https://dev-weiweixiao.com/';

const Service = axios.create({
  baseURL:ConfieBaseUrl,
  timeout:60000,
  responseType:'json',
  withCredentials:true,
});

const commonHeaders  = (token) =>{
  const headers = {
    "Content-Type": "application/json;charset=UTF-8",
    Authorization:token || null
  }
  return headers
}

Service.interceptors.request.use(config =>{
  Spin.setDefaultIndicator({});
return config
  
},error => Promise.reject(error)
);

Service.interceptors.response.use(respones=>{
  Spin.setDefaultIndicator({
    spinning:false
  })
  if (respones.status==403){
    router.push("/login");
  }
  return respones
},error => Promise.reject(error));


async function request(method='get',path='',params = null) {

  const token = await getToken('token')
  const requestConfig = {
    method,
    url: path
  }
  // ?timespan=1600645954067&page=1&limit=10
  if (params) {
    if (method === 'get') {

      requestConfig.url = `${path}${params}`
      console.log(requestConfig.url)

    }else if(method === 'delete'){
      requestConfig.url = `${path}${params}`

    }else if(method === 'patch'){
      requestConfig.url = `${path}${params.id}`
      requestConfig.data = params
      console.log(requestConfig.url,requestConfig.data)
    }
    else{
      requestConfig.data = params
      // console.log(params)
    }
  }
  requestConfig.headers = {
    ...commonHeaders(token)
  }
  return Service(requestConfig).then((response) => {
    const body = response.data
    if (Number(body.status) === Number('1000')) {

      return {response: body}
    }
    return {response: body}
  })
    .catch(error => {
      if (error instanceof Error) {
        return "网络错误"
      } else {
        message.error('未知错误',2)
      }
      return false
    })
}

export default request

 

参考: https://www.runoob.com/vue2/vuejs-ajax-axios.html

 

 

简单点就是 

创建实例的方法进配置

const Service = axios.create({
baseURL:ConfieBaseUrl,
timeout:60000
});

 

axios API传递继续配置

继续在实例里面传递配置

Service(

{ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }

)

 

 

传参数新写法(我是导出功能试了下没问题)

request.js

export function request(method='get',path='',data='',baseURL=ConfieBaseUrl,config = {} ) {
  const requestConfig = {
    method,
    url:path,
    
    headers: {
        "Content-Type":"application/json",
        "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
        "Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS",
    },
    data,
    ...config
  }

//这里的写法意思是 当传过来

{responseType: 'arraybuffer'，aa: 'bb'}
那么会往requestConfig 里面加

const requestConfig = {
    method,
    url:path,
    
    headers: {
        "Content-Type":"application/json",
        "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
        "Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS",
    },
    data,

　　responseType: 'arraybuffer'，

　　aa: 'bb'

}

 

index

export const rzCheck02 = (params, config = {})=> request("get","/v2/tool/check",params,'', config ={responseType: 'arraybuffer'});

 

程序员青戈 写的

import axios from 'axios'
import router from "@/router";
import {serverIp} from "../../public/config";

const request = axios.create({
    baseURL: `http://${serverIp}:9090`,
    timeout: 30000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
    if (user) {
        config.headers['token'] = user.token;  // 设置请求头
    }

    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        // 当权限验证不通过的时候给出提示
        if (res.code === '401') {
            // ElementUI.Message({
            //     message: res.msg,
            //     type: 'error'
            // });
            router.push("/login")
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request