最近想看一点react，看到接口封装的时候找到的资料都挺凌乱的，所以自己写一个吧。本来是写的vue的，但是找react的没找到合适的，想着反正都是JavaScript，估计都是一样的。结果套过来以后直接确实能用。。。。

安装

这个就不用多说了吧

$ npm install axios

建立文件结构

在src下建立api文件夹 分别建立四个js文件

request.js //（主要是数据放请求拦截的公共方法）
constent.js //（主要用于api地址的统一管理）
mainApi.js //（存放接口api具体的内容，如果接口很多，那么可以按类型，模块命名以后分不同的js来存放、譬如，login.js，home.js，author.js等等，这样比较清晰）
address.js  //（主要是用于环境的地址的设置，如果没什么操作也可以放在constent.js里面。看着更加清晰方便。）

request.js

import axios from 'axios'
// import qs from 'qs'
// 创建axios实例
const service = axios.create({
  timeout: 60 * 1000 // 请求超时时间
})
// 添加请求拦截器)
service.interceptors.request.use(
  config => {
    // 给请求加上请求头
    if(sessionStorage.token && sessionStorage.token !== 'undefined') {
      config.headers.Authorization = sessionStorage.token
    }
    // 在发送请求之前做某件事，譬如这里可以把参数序列化
    // if (config.method === 'post') {
    //   config.data = qs.stringify(config.data);
    // }
    return config
  },
  error => {
    console.log('错误的传参')
    // Do something with request error
    return Promise.reject(error)
  }
)
// respone拦截器，返回状态判断(添加响应拦截器)
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    if (error.response.status === 504 || error.response.status === 404) {
       console.log("服务器失去响应！");
    } else if (error.response.status === 401) {
       console.log("登录信息已经失效！");
    } else if (error.response.status === 500) {
       console.log("服务器不可用！");
    }
    return Promise.reject(error)
  }
)
export default service

constant.js

import ApiUrl from './address' // 这个是接口信息如果不是太多可以去掉address这js直接写接口信息
// const ApiUrl = 'xxxxxxxxxx'  可以直接写接口地址
// process.env.NODE_ENV 可以利用判断当前环境
/**
*如果不同的环境用不停的接口，当然这个如果写了address .js那写在那个里面也行
if(process.env.NODE_ENV ==='XXXXXXXXX'){
 const ApiUrl = 'aaaaaaaaaaa' 
}else{
  const ApiUrl = 'bbbbbbbbbbbb' 
}
*/
// 接口集合
export default {
  // 登录
  getLogin : `${ApiUrl}/user/login`,
}

mainApi.js

// 引用api公共地址
import constant from './constent'
// 引用接口公共方法
import request from './request'
// 注意两个请求的数据传输方式，看是data，还是params，还是怎么样的
// 登录 post 请求 
export function getLogin(paramsData) {
    return request({
        url: constant.getLogin,// 从公共的constent.js里面获取
        method: 'post',
        data: paramsData
    })
}
// 登录 get 请求
export function getLogin(params) {
    return request({
        url: constant.getLogin,// 从公共的constent.js里面获取
        method: 'get',
        params: params
    })
}

address.js (BTW:这个是看的网上的，我一般把这个直接写在constent的上面，但是看着这样写结构好像更加清晰)

// 获取当前的URL中的地址，同时携带端口号,不携带http://
let projectAddrass = window.location.host;
// 返回当前的URL协议,既http协议还是https协议
let protocol = document.location.protocol;
// 封装请求接口的地址,如果服务器中套了一层性项目名称，需要在这里面添加上,需要留意，例如: /zzxl/
const interfaceIp = `${protocol}//${projectAddrass}/api`;
// 对外提供的服务地址（为了分环境准备）
const ApiUrl = process.env.NODE_ENV === 'development' ? 'http://xxxxxxxxxxx/api' : interfaceIp;
// 
export default ApiUrl

页面上的用法（写就写全吧），至于为什么写两个，因为我发现react里面@路径不好使

vue里面

// 引用
import {getLogin} from "@/api/mainApi";
// 使用
const formData = {xxxxxx}
getLogin(formData).then(res=>{
  console.log(res)
})

react里面 （我刚刚看了一下react的菜鸡，写的不对的不要喷我，但是我确实用vue的这个在react里面写出来了）

// 引用
import {getLogin} from '../../api/mainApi'
// 使用
const paramsData = {xxxxxxxx}
getLogin(paramsData).then(res=>{
 console.log(res)
}）