axios请求封装

原创已于 2023-10-30 20:52:54 修改 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2023-10-30 20:46:46 首次发布

文章讲述了在前端开发中如何配置代理服务器解决跨域问题，使用axios进行API请求的封装，包括请求拦截和响应处理，并给出了一个addchapter方法的示例，展示了在其他页面调用这些封装功能的方法。

1：配置代理

  devServer: {
    // 配置代理服务器
    proxy: {
      // 跨域配置
      "/api": {
        target: "http://192.168.20.2:8081/",//请求的第三方接口
        changeOrigin: true,//在本地创建一个虚拟服务端，通过虚拟服务端发送接口
        pathRewrite: {//配置的/api的路径 重写路径
          "^/api": ""
        }
      }
    }
  }

2: 请求封装

import axios from 'axios'
const service = axios.create({
  baseURL: window.location.origin + "/api", // 设置基本URL
  // timeout: 5000, // 设置超时时间
});
// 请求拦截器
service.interceptors.request.use(config => {
  // 可在此处对请求进行处理，例如添加请求头、设置认证信息等
  return config;
}, error => {
  return Promise.reject(error);
});
// 响应拦截器
service.interceptors.response.use(response => {
  // 可在此处对响应进行处理，例如处理错误码、格式化数据等
  return response.data;
}, error => {
  return Promise.reject(error);
});
const http = {
  get(url, params = {}) {
    return service({
      url,
      params,
      method: 'get',
    });
  },
  post(url, data = {}) {
    return service({
      url,
      data,
      method: 'post',
    });
  },
  delete(url, params = {}) {
    return service({
      url,
      params,
      method: 'delete',
    });
  },

};
export default http;

3：编写方法

import http from './service.js';
export function addchapter(data) {
  return http.post('/article/add', data)
}

4：在需要的页面调用方法

axios请求封装

1 条评论