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

)