构建一个react项目 - 超详细 - axios的引入（二）

1 - axios依赖的安装

npm i -axios

下载成功后，会在项目中的package.json文件出现版本号

2 - axios的封装

• 在项目中新增axios目录（自己喜欢取什么就取什么），新建axios.js文件

import axios from 'axios'

// baseURL - 接口域名
axios.defaults.baseURL = ''

// 请求前的拦截器 - request
axios.interceptors.request.use(
    config => {
        // 发送请求前进行的操作

        // 设置请求超时时间
        config.timeout = 150000
        // 设置请求头
        config.headers = {
            'Content-Type': 'application/json',
            'Authorization': ''
        }
        return config
    },
    error => {
        // 请求错误触发的操作
        return Promise.reject(error)
    }
)

// 响应后的拦截器 - response
axios.interceptors.response.use(
    response => {
        // 对响应数据进行处理

        // 校验token是否过期 - 根据后端返回的状态码进行识别 比如 1001为token过去
        if (response.data.code === '1001') {
            console.log('token过期，请重新进行授权登录');
        }
        return response
    },
    error => {
        console.log('请求出错 -- 错误信息：', error);
    }
)

• 项目中新增api目录，新建testApi.js文件

import request from '@/axios/axios.js'

export default function testRequestApi(param) {
    return request({
        url: param.url,
        method: param.method,
        params:  param.params
    })
}

• src目录文件中 ***.js中引用

import { testRequestApi } from '@/api/testApi.js'
const param = {
    url: '',
    method: '',
    params: {}
  }
  testRequestApi(param).then(res => {})