vue-axios

Axios

常用请求方式

• get

• post

• delete

• put

• patch

• head

• request

• all: 发送多个请求，返回一个数组

  axios.all([])
  

常用配置选项

• url

• method

• baseURL: 根路径

  axios.default.baseURL = 'https://xxx:999'
  

• data

• params

• headers

  axios.default.headers = {
      
  }
  

• timeout

  axios.default.timeout = 60
  

• transformRequest: [function()] 请求前的数据处理

• transformResponse: [function()] 请求后的数据处理

• paramsSerializer: 查询对象序列化函数

创建实例

const instance = axios.create({
    baseURL:'',
    timeout:6000,
    header:{
        
    }
})

// 使用
instance.get()

请求和响应拦截

// 请求拦截
axios.interceptors.request.use((config)=>{
    // 成功
    config.header['token'] = 'xxxx'
},()=>{
    // 失败
})

// 响应拦截
axios.interceptors.response.use((res)=>{
    // 成功
    return res.data
},()=>{
    // 失败
})

封装

import axios from 'axios'
import useMainStore from 'store/modules/mainStore'
import jsonpAdapter from 'axios-jsonp'


class HYAxios {
  constructor({ baseURL = "/", timeout = 5000 } = {}) {
    this.service = axios.create({
      baseURL,
      timeout
    })
    // 注意pinia实例不能在外面创建
    this.mainStore = useMainStore()
    // 请求拦截
    this.service.interceptors.request.use((config) => {
      // 请求成功
      this.mainStore.isLoading = true
      return config
    }, (err) => {
      this.mainStore.isLoading = false
      return err;
    })

    // 响应拦截
    this.service.interceptors.response.use((res) => {
      this.mainStore.isLoading = false
      return res.data
    }, () => {
      this.mainStore.isLoading = false
      return err
    })
  }

  request(config) {
    return this.service.request(config)
  }

  get(config) {
    return this.service.request({ ...config, method: 'get' })
  }
  post(config) {
    return this.service.request({ ...config, method: 'post' })
  }

  patch(config) {
    return this.service.request({ ...config, method: 'patch' })
  }

  delete(config) {
    return this.service.request({ ...config, method: 'delete' })
  }

  jsonp(config) {
    return this.service.request({
      adapter: jsonpAdapter,
      callbackParamName: 'callback', 
      ...config
    })
  }

}

export default HYAxios