Vue配置axios请求后台

axios

axios官网：axios中文网|axios API 中文文档 | axios

首先先下载axios

在src目录下创建一个request文件夹，在里面分别创建https.js文件和api.js文件

在https.js文件夹内导入axios以及写入axios官网的拦截器

import axios from "axios"
const instance = axios.create({
  baseURL: "http://localhost:3000",//要发送请求的https路径
  timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  // config.headers[""]=token
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

//响应拦截器
instance.interceptors.response.use((response) => {
  // 对响应数据做点什么
  return response;
}, (error) => {
  // 对响应错误做点什么
  return Promise.reject(error);
});
//导出变量
export default instance

在api.js文件夹内引入我们的https.js文件夹

并分配好是这个接口是 get 请求还是 post 请求

import https from "./https"
//携带有请求参数的
export const xxx = (params) => https.get("xxx", { params })
export const xxxx = (data) => https.post("xxx", data)
//没有携带有请求参数的
export const xxx = () => https.get("xxx")
export const xxxx = () => https.post("xxx")

在这里特别声明一下，get的请求携带的参数的必须要写成 params！！！详情请浏览官网！！

使用

来到我们要调用请求的页面，引入我们 api.js 的文件夹即可

import { xxx } from "@/request/api.js"

// 没有携带参数的
xxx().then( (res) => {
console.log(res);
}).catch( (error) => {
    console.log(error);
  });

//携带参数的
xxx({id:"",}).then( (res) => {
console.log(res);
}).catch( (error) => {
    console.log(error);
  });

 注：在api.js文件夹里面其实已经分好接口是get请求还是post请求，在页面中使用的时候直接调用就好了