新手基于axios 的二次封装

最新推荐文章于 2024-08-22 14:32:34 发布

喔烨鸭

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量664

点赞数 1

文章标签： javascript 开发语言 ecmascript axios

本文链接：https://blog.csdn.net/qq_45432996/article/details/137246145

版权

《1》简单封装。

在src文件夹下新建api文件夹，新建request.js

const _errno = 1
import axios from 'axios'

export function get(url) {
    return function (params) {
        return axios.get(url, {
            params
        }).then((res) => {
            const { errno, data } =res.data
            if(errno = _errno ){ //对数据进行判断 是否正确
                return data
            }                       
        }).catch(() => {

        })
    }
}

在api文件夹新建index.js

import { get } from './request.js'

const getNews = get('/api/v1/news')

export {
    getNews
}

使用

import { getNews } from 'api'

methods:{

    getData(){
        getNews().then((res) => {

        })
    }

《2》符合更多场景的封装
对request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL等统一进行了封装

新建api文件夹，新建request.js

import axios from 'axios'

import { MessageBox, Message } from 'element-ui'

import store from '@/store'

import { getToken } from '@/utils/auth'



// create an axios instance

const service = axios.create({

  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

  // withCredentials: true, // send cookies when cross-domain requests

  timeout: 5000 // request timeout

})



// request interceptor

service.interceptors.request.use(

  config => {

    // do something before request is sent

    if (store.getters.token) {

      // let each request carry token

      // ['X-Token'] is a custom headers key

      // please modify it according to the actual situation

      config.headers['X-Token'] = getToken()

    }
    return config
  },

  error => {

    // do something with request error

    console.log(error) // for debug

    return Promise.reject(error)

  }

)

// response interceptor

service.interceptors.response.use(

  /**

   * If you want to get http information such as headers or status

   * Please return  response => response

  */

  /**

   * Determine the request status by custom code

   * Here is just an example

   * You can also judge the status by HTTP Status Code

   */

  response => {

    const res = response.data

    // if the custom code is not 20000, it is judged as an error.

    if (res.code !== 20000) {

      Message({

        message: res.message || 'Error',

        type: 'error',

        duration: 5 * 1000

      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;

      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

        // to re-login

        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {

          confirmButtonText: 'Re-Login',

          cancelButtonText: 'Cancel',

          type: 'warning'

        }).then(() => {

          store.dispatch('user/resetToken').then(() => {

            location.reload()

          })

        })

      }

      return Promise.reject(new Error(res.message || 'Error'))

    } else {

      return res

    }

  },

  error => {

    console.log('err' + error) // for debug

    Message({

      message: error.message,

      type: 'error',

      duration: 5 * 1000

    })

    return Promise.reject(error)

  }

)

export default service

新建index.js

import request from '@/utils/request'



export function fetchList(query) {

  return request({

    url: '/vue-element-admin/article/list', // 可进行地址的拼接

    method: 'get',

    params: query，

    baseURL: 'xxxx'  // 可进行覆盖url

  })

}