Axios的常规封装

210 阅读1分钟

axios的常规封装


import axios from 'axios'

const http = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
})

// 添加请求拦截器
http.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  },
)

// 添加响应拦截器
http.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(error)
  },
)

const post = (url, data) => {
  return new Promise((resolve) => {
    http
      .post(url, data)
      .then((result) => {
        resolve(result)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
const get = (url, params) => {
  return new Promise((resolve, reject) => {
    http
      .get(url, { params })
      .then((result) => {
        resolve(result)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

export default {
  get,
  post,
}

使用

import request from './index'

const getList = (params) => request.get('/getList', params)
const postList = (params) => request.post('/postList', params)

;(async () => {
  try {
    const postres = await postList({
      method: 'post',
    })

  } catch (error) {
  }
})()

对于常规封装,只是单纯的将get、post请求参数进行统一,没有实质性的意义。