?axios官網：axios中文網|axios API 中文文檔 | axios

簡單封裝：配置基礎路徑和超時時間，還有請求攔截器和響應攔截器?

//對axios進行二次封裝
import axios from 'axios'

//1、利用axios對象的方法create,去創建一個axios實例
const requests = axios.create({
    //配置對象
    //基礎路徑，requests發出的請求在端口號后面會跟改baseURl
    baseURL: '/api',
    //代表請求超時的時間5s
    timeout: 5000,
})
//請求攔截器，在請求發出之前做些事情
requests.interceptors.request.use((config) => {
    //config:配置對象，對象里面有個屬性很重要，header請求頭
    return config
})
//響應攔截器,對響應的數據做一些操作
requests.interceptors.response.use(
    (res) => {
        //成功回調函數，服務器響應數據回來以后，響應攔截器可以檢測到，可以做一些事情
        return res.data
    },
    (error) => {
        //響應失敗回調函數，如終結Promise鏈
        console.log('請求失敗:', error)
        return Promise.reject(error)
    }
)
//對外暴露
export default requests

?

接口統一管理 api/index.js

import requests from '@/utils/http'

export default {
    getList(data) {
        return requests({
            url: '/message/list',
            method: 'post',
            data,
        })
    },
    changeStatus(data) {
        return requests({
            url: '/message/isReads',
            method: 'post',
            data,
        })
    },
    getMsgType(params) {
        return requests({
            url: '/message/messageType',
            method: 'get',
            params,
        })
    },
    deleteMsg(data) {
        return requests({
            url: '/message/delete',
            method: 'post',
            data,
        })
    },
}

ts格式的請求:

import requests from '@/utils/http'

export default {
    getList(data: object) {
        return requests({
            url: '/message/list',
            method: 'post',
            data,
        })
    },
    changeStatus(data: object) {
        return requests({
            url: '/message/isReads',
            method: 'post',
            data,
        })
    },
    getMsgType(params: object) {
        return requests({
            url: '/message/messageType',
            method: 'get',
            params,
        })
    },
    deleteMsg(data: object) {
        return requests({
            url: '/message/delete',
            method: 'post',
            data,
        })
    },
}

在組件中使用get請求：

      try {
        const { data } = await msgApi.getMsgType()
        data && (this.msgTypelist = Object.keys(data).map((i) => {
          const obj = {}
          obj.id = +i
          obj.label = data[i]
          return obj
        }))
      } catch (error) {
        console.log(error)
      }

發送Post請求：

      msgApi.changeStatus({ ids: idArr }).then((res) => {
        if (res.retcode === 0) {
          this.$message.success('操作成功')
        }
      })

帶有鑒權方案的axios封裝：

import axios from 'axios'
// import store from '@/store'
import { Message } from 'element-ui'

const service = axios.create({
  baseURL: `${window.location.origin}/fate-serving/api`,
  withCredentials: false,
  timeout: 20000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('sessionToken')
    config.headers['sessionToken'] = token
    return config
  },
  error => {
    // Do something with request error
    Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get information such as headers or status
   * Please return  response => response
   */
  response => {
    const res = response.data
    if ((res.code !== undefined && res.code === 0) || (res.retcode !== undefined && res.retcode === 0)) {
      return new Promise(resolve => {
        resolve(res)
      })
    } else if (res.code === 401) {
      Message({
        message: '登錄已失效，請重新登錄',
        type: 'warning',
        duration: 2 * 1000
      })
      localStorage.removeItem('sessionToken')
      // setTimeout(() => {
      //   window.location.reload()
      // }, 800)
    } else {
      Message({
        message: res.message || res.msg || res.retmsg,
        type: 'error',
        duration: 2 * 1000
      })
      return Promise.reject('error')
    }
  },
  error => {
    console.log('err:', error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 2 * 1000
    })
    return Promise.reject(error)
  }
)

export default service