欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

封装axios的方法

程序员文章站 2022-06-23 09:31:51
通过使用 axios来调接口请求后台数据,我们可以将axios封装起来,分为三部分,创建axios, 封装请求拦截器,封装响应拦截器,具体可以翻npm官方文档,可以找到具体的答案。封装axios还是需要做代理://Vue中的代理: 在 #vue.config.js:module.exports = { devServer: { port: 8787, proxy: {"/api":{target:"http://10.36.147.147:3000",...

通过使用 axios来调接口请求后台数据,我们可以将axios封装起来,分为三部分,创建axios, 封装请求拦截器,封装响应拦截器,具体可以翻npm官方文档,可以找到具体的答案。
封装axios还是需要做代理:

//Vue中的代理: 在 #vue.config.js:
module.exports = {
    devServer: {
      port: 8787,
      proxy: {
		"/api":{
			target:"http://10.36.147.147:3000",
			ws:true,
			changeOrigin:true
		},
		"/upload":{
			target:"http://10.36.147.147:3000",
			ws:true,
			changeOrigin:true
		}
      }
    }
  }
  
// react 中的代理 : 创建文件src>setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  // 登入的代理
    app.use(
      '/users',
      createProxyMiddleware({
        target: 'http://localhost:3000',
        changeOrigin: true,
      })
    ),
    // 商品列表的代理
    app.use(
      '/good',
      createProxyMiddleware({
        target: 'http://localhost:3000',
        changeOrigin: true,
      })
    ),
    // 图片上传
    app.use(
      '/upload',
      createProxyMiddleware({
        target: 'http://localhost:3000',
        changeOrigin: true,
      })
    ),
    // 商品品类
    app.use(
      '/cate',
      createProxyMiddleware({
        target: 'http://localhost:3000',
        changeOrigin: true,
      })
    ),
    // cnode 的代理
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'https://cnodejs.org',
        changeOrigin: true,
      })
    )
    
  }



  • 封装请求拦截器:
    在请求拦截器里面,我们可以设置token,而token就是一个令牌,是我们请求数据的重要凭证
  • 封装响应拦截器
    在我们响应拦截器里面,我们将请求的数据返回出去,
    注意点:我们要根据后端返回的数据做判断,后端返回啥,我们就用啥做判断。
import axios from "axios"

let baseURL = "http://localhost:8888/" // 开发环境
// let baseURL = "http://XXXXXXXX:9898"  // 测试环境
// let baseUrl = "http://yyyyyyyy:7777"  // 生产环境

const fetch = axios.create({
    baseURL: baseURL,
    timeout: 7000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8' 
    }
  })

// 封装请求拦截器
fetch.interceptors.request.use((config)=> {
    //在这里做一些检测或者包装等处理

    //鉴权 token添加
    config.headers.Authorization = localStorage.getItem("token")
    return config
  });


// 封装响应拦截器
fetch.interceptors.response.use((response)=> {
    // 请求成功
    console.log("响应拦截",response)
    //根据后端返回的状态,我们打印不同的结果
    const code = response.data.err
    const message = response.data.message
    console.log("code",code)
    // 数据处理
    if(code ===  0 ){
      // console.log("响应",response.data.data)
      return response.data.data
    } else if(code ===  1){
      message.error("缺少必填参数")
    } else if(code === -1){
      message.error("token 无效")
    }else if( code === 2){
      message.error(response.data.message)
    } else if(response && response.data.success){
      return response.data.data
    }else{
      console.log("");
    }

  },(error)=> {
    //   请求失败
    return Promise.reject(error);
  });



//   抛出fetch
export default fetch

本文地址:https://blog.csdn.net/Hza_1031/article/details/107505365

相关标签: 前端笔记