Axios配置跨域及封装Get/Post请求方法

2023-05-2912:42:54WEB前端开发Comments1,408 views字数 1865阅读模式
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 nodejs 中发起请求。
封装的目的在于复用。
封装的目的在于把公共部分封装。

Axios配置跨域及封装Get/Post请求方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/43118.html

安装Axios

 npm install axios

Vue2引入Axios配置与请求方法封装

import axios from "axios";// 超时时间是5秒axios.defaults.timeout = 5000;// 允许跨域axios.defaults.withCredentials = true;// Content-Type 响应头axios.defaults.headers.post["Content-Type"] =  "application/x-www-form-urlencoded;charset=UTF-8";// 基础url// axios.defaults.baseURL = 后台接口地址;axios.defaults.baseURL = 线上生产环境地址;
/** * 封装get方法 */export function get(url, params = {}) {  return new Promise((resolve, reject) => {    axios      .get(url, { params: params })      .then(response => {        resolve(response.data);      })      .catch(err => {        reject(err);      });  });}
/** * 封装post方法 */export function post(url, data = {}) {  return new Promise((resolve, reject) => {    axios      .post(url, data)      .then(response => {        resolve(response.data);      })      .catch(err => {        reject(err);      });  });}

Vue2请求后台接口写法

import{ get, post } from "./http";//get带参请求
export const 自定义接口名 = params => get(`后台接口名`, params);
export const 自定义接口名=id=> get(`后台接口名?id=${id}`);
// encodeURIComponent可把字符串作为 URI 组件进行Base64编码// 使中文能在url传输成功
export const 自定义接口名 = 字符串变量名 =>
get(`后台接口名/` + encodeURIComponent(字符串变量名));

//无参数写法
export const 自定义接口名 =()=> get(`后台接口名`);

Vue3 Vite项目方式引入Axios配置

封装get及post方法同vue2,故不再介绍,请往上看文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/43118.html

.env配置文件中定义好接口地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/43118.html

# 基础urlVITE_APP_BASE_API = 后台接口地址# 某服务1相关接口VITE_APP_BASE_某服务1_API = 某服务1接口地址# 某服务2相关接口VITE_APP_BASE_某服务2_API = 某服务2接口地址

axios文件引入配置

import axios from "axios";// 开启跨域请求,携带 cookie,若使用token鉴权则对项目没有什么作用axios.defaults.withCredentials = true
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
export const base_api = import.meta.env.VITE_APP_BASE_APIexport const 某服务1_api = import.meta.env.VITE_APP_BASE_某服务1_APIexport const 某服务2_api = import.meta.env.VITE_APP_BASE_某服务2_API
// 创建axios实例const service = axios.create({  // axios中请求配置有baseURL选项,表示请求URL公共部分  baseURL: import.meta.env.VITE_APP_BASE_ADMIN_API,  // 超时  timeout: 10000})

请求后台接口写法,类似Vue2


//判断管理员是否登录成功export function 方法名(params{  return request({    url: `${全局接口地址}/auth/login`,    method: 'post',    data: params  })}
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/43118.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/43118.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定