ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

axios的封装 和拦截器的使用

2021-02-15 15:02:50  阅读:142  来源: 互联网

标签:axios 封装 log request instance 拦截器 console config


import axios from "axios";

//第一种方式
export function request(config,success,failure) {
    const instance = axios.create({
       baseURL:"http://123.207.32.32:8000" ,
        timeout:5000
    })
    instance(config)
        .then(res=>{
            // console.log(res)
            success(res)
        })
        .catch(err=>{
            // console.log(err)
            failure(err)
        })
}
//第二种方式
export function request(config) {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL:"http://123.207.32.32:8000" ,
            timeout:5000
        })
        instance(config)
            .then(res=>{
                resolve(res)
            })
            .then(err=>{
                reject(err)
            })
    })
}
//第三种方式
export function request(config,success,failure) {
    const instance = axios.create({
       baseURL:"http://123.207.32.32:8000" ,
        timeout:5000
    })
    return instance(config)
}
//最终方式
export function request(config,success,failure) {
    // 1,创建实例
    const instance = axios.create({
       baseURL:"http://123.207.32.32:8000" ,
        timeout:5000
    })
    //设置拦截器
    instance.interceptors.request.use(config=>{
        console.log(config)
        return config
    },error => {
        console.log(error)
    })
    axios.interceptors.response.use(config=>{
        console.log(config)
        return config
    },error => {
        console.log(error)
    })
return instance(config) }
import {request} from "./network/request";
// 相关模块使用 request({ url:"/home/multidata" }).then(res=>{ console.log(res) }).catch(err=>{ console.log(err) })

 其中响应拦截跟请求拦截的使用方式是一样    然后再进行拦截后都要将数据return  不然会出现错误

标签:axios,封装,log,request,instance,拦截器,console,config
来源: https://www.cnblogs.com/bear6770/p/14403723.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有