axios二次封装

axios官网：起步 | Axios中文文档 | Axios中文网

第一步：先下载安装  npm install axios

第二步：在你的项目src文件下新建一个util文件夹，在其下新建一个名为request.js文件

然后在request.js文件开始写代码啦

//首先，引入axios

import axios from 'axios'

//然后创建axios实例

const http = axios.create({

        //设置请求根路径

        baseURL:'https://.......',

        //设置超时时间  单位是ms

        timeout:3000,

})

//在实例上添加请求拦截器和响应拦截器

//（1）请求拦截器

http.interceptors.request.use(config=>{

        //在发送请求之前做些什么

        //1、设置请求头信息

         const token = localStorage.getItem('token')

        // 不需要添加token的接口 （比如登录、注册、获取验证码等，具体情况看接口文档）

        const whiteURL = ['/register', '/user/authentication', '/login']

        // 如果token存在并且不在白名单中

        if (token && !whiteURL.includes(config.url)) {

            // x-token看接口文档的字段

            config.headers['x-token'] = token

        }

        //2：返回配置信息

        return config

}，

error => {

        // 3：请求错误处理

        return Promise.reject(error)

    }

)

//（2）响应拦截器

http.interceptors.response.use(

    response => {

        // 1：对接口异常的数据，需要给用户提示

        if (response.data.code === -1) {

            ElMessage.error(response.data.message)

            return Promise.reject(new Error(response.data.message))

        }

        // 4.2:token失效

        if(response.data.code === -2){

            ElMessage.error('登录过期，请重新登录')

            localStorage.removeItem('token')

            localStorage.removeItem('userInfo')

            // 回到登录页

            window.location.href = window.location.origin + '/login'

        }

        return response

    },

    error => {

        // 超出2xx状态码的响应会进入这里

        // 4.2：响应错误处理

        if (error.response.status === 401) {

            ElMessage.error('登录过期，请重新登录')

            localStorage.removeItem('token')

            localStorage.removeItem('user')

            location.reload()

            return Promise.reject(error)

        }

    }

)

//最后导出实例

export default http

第三步：使用，在src下创建一个api文件夹，在其下创建index.js

在index.js文件写入

//导入封装好的axios

import request from '../utils/request'

// 登录

export const login = (data) => {

    return request.post('/login', data)

}

..............

在项目中

import {login } from "../../api";

login({传参}).then(({data})=>{

console.log(data)

...........

})