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");
});