封装axios

Posted 2023-05-21 qijiangforever

import axios from "axios";

const request = axios.create(
    baseURL: "/api", //统一前缀
    timeout: 5000,
);

//request拦截器
request.interceptors.request.use(
function (config) 
    config.headers["Content-Type"] = "application/json; charset=utf-8";
    
    // let user = JSON.parse(localStorage.getItem(\'users\'))
    if(user)
    //设置请求头
    config.headers[\'token\'] = user.token
    


    return config;
,
(error) => 
    return Promise.reject(error);

);

// response拦截器
request.interceptors.response.use(
function (response) 
    let res = response.data;

    // if (typeof res === "string") 
    //     res = res ? JSON.parse(res) : res;
    // 
    if (response.config.responseType === "blob") 
        return res;
    

    return res;
,
(error) => 
    console.log("error: ", error); //方便调试
    return Promise.reject(error);

);


export default request

 

vue axios接口封装Promise封装简单的axios方法封装vue接口方法封装vue postgetpatchput方法封装

相信大家在做前后端数据交互的时候都会给请求做一些简单的封装
就像之前封装ajax方法一样
axios的封装也是一样的简单
下面这个就是封装的axios的方法，require.js

import axios from ‘axios‘

axios.defaults.timeout = 5000
axios.defaults.baseURL = ‘接口名称-共用部分‘

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
    })
}

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get (url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(response => {
                resolve(response.data)
            })
            .catch(err => {
                reject(err)
            })
    })
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
    })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
    })
}

只要在main.js里面引入就可以

import {post, get, patch, put} from ‘./untils/require‘
Vue.prototype.$post = post
Vue.prototype.$fetch = get
Vue.prototype.$patch = patch
Vue.prototype.$put = put

当你需要在页面中使用的时候不用再做引入操作

this.$post(‘接口名称‘).then((res) => {
    console.log(res)
     // 成功的方法回调
    }).catch(function (err) {
      console.log(err)
      // 失败的方法回调
    })

当然了这个封装的方法是根据个人的习惯来做的
如果想封装的再细致一些，那就可以把方法名称再做一下封装
把接口名称的这一块封装到一个js里面，然后module.exports一下
然后在使用的页面就不用再写接口名称了，直接使用封装的方法名就可以了