当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 封装axios的方法

封装axios的方法

2020年07月23日  | 移动技术网IT编程  | 我要评论

通过使用 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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网