react封装axios请求接口

2021-08-20   阅读:1132   分类:前端    标签: React

我们每次都要请求数据,为了方便后期的维护和修改,我们可以对axios请求进行分装

1、 安装axios插件

npm isntall axios –save

2、 新建request.js文件,用于封装axios

import axios from "axios";
import { getToken } from './auth'

const instance = axios.create({
   baseURL: 'http://vue.tpxhm.top/',
   timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
   // 在发送请求之前做些什么
   config.headers['token'] = getToken()
   return config;
 }, function (error) {
   // 对请求错误做些什么
   return Promise.reject(error);
 });

 

// 添加响应拦截器

instance.interceptors.response.use(function (response) {
   // 对响应数据做点什么
   return response.data;
 }, function (error) {
   // 对响应错误做点什么
   return Promise.reject(error);
 });

/**
 * get请求
 * @param {*} url 请求地址
 * @param {*} param url参数
 */

export function get(url, params){
   return instance.get(url,{
       params
   })
}

/**
 * post请求
 * @param {*} url 请求地址
 * @param {*} data url参数
 */

export function post(url, data){
   return instance.post(url,data)
}

 

/**
 * put请求
 * @param {*} url 请求地址
 * @param {*} data url参数
 */

export function put(url, data){
   return instance.put(url,data)
}

/**
 * del请求
 * @param {*} url 请求地址
 */

export function del(url){
   return instance.del(url)
}

2、 编写请求接口文件searvice.js// 服务端请求

import { get, post, put, del } from '../utils/request'
/**
 * 用户登录
 * @param {*} user 
 * @returns 
 */
export function loginApi(user){
  return post('api/login', user)
}

3、 接口请求实例

loginApi({
  username: values.username,
  password: values.password,
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})
【腾讯云】爆款云服务器限时体验20元起,更多上云必备产品低至1元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/790.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×