Vue.js（18）之 axios简单封装

基于vue-cli2.x封装axios

src目录

axios.js

import axios from 'axios'
import { Indicator, Toast } from 'mint-ui'

// request 拦截器
axios.interceptors.request.use(config => {
  Indicator.open({ text: '加载中...', spinnerType: 'snake' })
  return config
}, err => {
  Indicator.close();
  Toast({ message: '请检查您的网络连接并重试', duration: 2000, className: 'mToast' })
  return Promise.reject(err)
})

// response 拦截器
axios.interceptors.response.use(
  config => {
    Indicator.close();
    return config
  }, err => {
    Indicator.close();
    Toast({ message: '请检查您的网络连接并重试', duration: 2000 })
    Promise.reject(err)
  }
)

export default axios

config.js

// 在 axios中，利用QS包装data数据
import Qs from 'qs'
const config = {
  baseURL: 'http://www.****.top:8888/',
  url: '',
  method: 'get',
  params: {},
  data: {},
  timeout: 100000,
  withCredentials: false,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json'
  },
  maxContentLength: 10000,
  maxRedirects: 5,
  transformResponse: [function(data) {
    return data
  }],
  paramsSerializer: function(params) {
    return Qs.stringify(params)
  },
  onUploadProgress: function(progressEvent) {
    // console.log('onUploadProgress...');
  },
  onDownloadProgress: function(progressEvent) {
    // console.log('onDownloadProgress...');
  }
}

export default config

fetch.js

// 引入 请求拦截 配置
import $axios from "./axios"
// 引入 请求参数 配置
import config from './config'

config.headers.Authorization = window.sessionStorage.getItem('token') || ''

// 封装成自己的方法
fetch = async function(url, method, request, other) {
  let response
  if(method == 'post') {
    config.data = request
    response = await $axios.post(url, request, config)
  } else if(method == 'get') {
    config.params = request
    response = await $axios.get(url, config)
  }
  console.log(response)
  return response
}

export default fetch

测试

.vue文件

<template>
  <div>
    <hr>
    <h1 @click="postJson">login-postJson</h1>
    <hr>
    <h1 @click="getJson">getJson</h1>
    <hr>
    <h1 @click="getUserList">getUserList</h1>
  </div>
</template>

<script>
import mix from './Apitest-mixins.ts'

export default {
  mixins: [mix]
}
</script>

.ts文件

import fetch from '../../request/fetch.js'
export default {
  methods: {
    async postJson() {
      const params = {
        "username": "admin",
        "password": "123456"
      }
      let { data: res } = await fetch('/login', 'post', params)
      window.sessionStorage.setItem('token', res.data.token)
      console.log(res)
    },
    async getJson() {
      let { data: res } = await fetch('/roles', 'get')
      console.log(res)
    },
    async getUserList() {
      let params = {
        query: 'a',
        pagenum: 2,
        pagesize: 10
      }
      const { data: res } = await fetch('/users', 'get', params )
      console.log(res)
    }
  }
}

遗留bug

请求头？？？百度了2天，问了同事也没有解决了，自己都奔溃了

来源：https://www.cnblogs.com/houfee/p/10956566.html

标签

config

response

fetch