发送请求axios之设置请求

设置请求

在工作中和平时的学习中，我们总会和请求打交到，毕竟这是前后端分离以后的数据交互，在请求中有各式各样的例如：原生的fetch、axios和jq中的ajax。
今天聊聊axios的一些常规设置 一般我们在使用axios的时候会对其进行二次封装使用的是axios的create这个属性如下

var service = axios.create({baseURL:'http://localhost:3000' ,
 "content-type": "application/json",
 timeout:5000,

在上面代码中baseURL是之最前面的网址，用我的蹩脚的翻译：网址的基础，是在这个网址上进行干什么。然后content-type是设置传输数据的类型，这里我用的是json字符串格式。timeout设置请求时间避免过长时间的请求，同时在更改接口是可以避免一个一个接口的更改查找，那样还要每次看看少了什么麻烦死了。

请求拦截

首先设置request对从页面发出的请求进行拦截

service.interceptors.request.use(config=>
return config
)

看完以后你会想有什么用呢？ 现在我就来进行回答
在请求中你会遇到这样的文档

- 获取用户信息
url
  /api/v1/users/info
method
  get
headers
  authorization Bearer token  // 需要提供jwt信息
return
  {
  }

这个时候请求拦截就起到作用了可以在内部设置

service.interceptors.request.use(config => {
  if (sessionStorage.getItem("token")) {
    config.headers["token"] = sessionStorage.getItem("token");
  }
  return config;
});

这样就可以省去很多麻烦避免每次发请求都要繁琐的设置请求。
既然有拦截发出去的请求也会存在拦截返回的数据在返回的数据中总会有一些无关紧要的属性每次都要写一长流的链条 这个时候设置拦截可以帮我们进行第一层的拦截。

service.interceptors.response.use(res => {
  return res.data;
});

以上的完整代码需要导出以供使用完整版如下：

import axios from "axios";

var service = axios.create({
  baseURL: "http://localhost:3000",
  "content-type": "application/json",
  timeout: 5000,
});
service.interceptors.request.use(config => {
  if (sessionStorage.getItem("token")) {
    config.headers["token"] = sessionStorage.getItem("token");
  }
  return config;
});
service.interceptors.response.use(res => {
  return res.data;
});

export default service;

这样我们就可以轻松的写以后的代码，这时候也行会有小伙伴问怎么使用呢？使用如下：

import axios from "../aixios";
axios.get("网址").then()

没错常规的引入就行。在发请求是我们有时候会遇到请求返回以后，需要设置请求头但是怎么都不行，一旦用token就提醒跨域，这个时候我们还可以再次进行请求设置来让我们的请求实现
先npm i http-proxy-middleware
然后在src的目录下创建名字为setupProxy.js的文件
然后设置

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    "/qingqiu",
    createProxyMiddleware({
      target: "http://localhost:3000",
      changeOrigin: true,
      pathRewrite: {
        "^/hd": "",
      },
    })
  );
};

这个时候在使用的时候就可以

import axios from "axios";

var service = axios.create({
  baseURL: "qingqiu",
  "content-type": "application/json",
  timeout: 5000,
});
service.interceptors.request.use(config => {
  if (sessionStorage.getItem("token")) {
    config.headers["token"] = sessionStorage.getItem("token");
  }
  return config;
});
service.interceptors.response.use(res => {
  return res.data;
});

export default service;

这样就可以来轻松完成请求来避免跨域

欢迎各位大佬，小白留言讨论，我会尽量会回复每一个人