关于axios请求配置, request的封装, 请求拦截器和响应拦截器的拦截范围, 使用express临时后台测试

2022-02-14 17:52:27 阅读：175 来源： 互联网

标签：axios console 请求 err res 拦截器 const data log

1. axios请求拦截器, 响应拦截器的使用, 拦截范围解析 request.js 工具文件

import axios from 'axios'
const baseURL = 'http://localhost:3624'

axios.interceptors.request.use(
  (res) => {
    // 请求成功拦截, 无论地址是否是对的, 只要发请求就会走这个
    console.log(res, '成功请求拦截')
    return res
  },
  (err) => {
    // 不知道什么情况下会走这个, 把地址删除了好像也是正常的
    console.log(err, '失败请求拦截')
    return err
  }
)

axios.interceptors.response.use(
  (res) => {
    // 返回的status 以 2 开头会走这个
    console.log(res, '拦截器')
    return res
  },
  (err) => {
    // 响应拦截, status !== 200 会被这里拦截
    console.log(err, '失败拦截')
    console.log(err)
  }
)

export default function (option = {}) {
  const { url, method = 'get', data = {} } = option
  const fullUrl = url.startsWith('http') ? url : baseURL + url

　　// 请求参数的格式, get请求是 params下面有一个 data 对象, post 请求是直接把 data 丢上去就行
  // get 请求 params > data
  // post 请求, 直接就是 > data

  const config = {
    url: fullUrl,
    method,
    data
  }

  return new Promise((resolve, reject) => {
    axios(config)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        // 网络错误会走这里, status 不是2开头都会走这里
        console.log(err, 'err')
      })
  })
}

2. 关于 api 的整合, 参考某大佬, 觉得挺有规范性的 api/index.js 文件

import http from '@/utils/request.js'

export const GetTest = (data = {}) => {
  return http({
    url: '/test',
    method: 'get',
    data
  })
}

export const PostTest = (data = {}) => {
  return http({
    url: '',
    method: 'post',
    data
  })
}

3. 使用express搭建的简单后台, 配置两个接口 /test 和 /test2

使用需要安装两个包文件, express 和 cors, 一个是服务端框架, 一个是跨域资源共享包

const express = require("express");

const cors = require("cors");

const app = express();

// 允许使用跨域资源共享
app.use(cors());

// 解析 post 请求的参数
app.use(express.json());

app.get("/test", (req, res) => {
  console.log(req.query);
  res.send({
    ret: 0,
    msg: "成功",
    data: {},
  });
});

app.post("/test2", (req, res) => {
  console.log(req.body);

  res.status(301).send({
    ret: 0,
    msg: "成功",
    data: {
      list: ["apple", "banana", "orange"],
    },
  });
});

app.listen(3624, () => {
  console.log("server is running at localhost:3624");
});

标签：axios,console,请求,err,res,拦截器,const,data,log
来源： https://www.cnblogs.com/fmg224/p/15893531.html

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

ICode9

关于axios请求配置, request的封装, 请求拦截器和响应拦截器的拦截范围, 使用express临时后台测试