react封装axios请求接口

我们每次都要请求数据，为了方便后期的维护和修改，我们可以对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)
})