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