axios的使用及二次封装

1. axios介绍

前端最流行的ajax请求库，react/vue官方都推荐使用axios发送ajax请求；

是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2. axios的使用

没有二次封装前获取的数据

import axios from 'axios'
import config from './config'

axios.get(config.mockApi + '/login').then((res) => {
    console.log(res);
})

axios的二次封装

为什么要二次封装axios?

对axios请求前 和请求后的事情做一些统一的处理。

例如：请求前需要做：token是共有的机制，需要做统一的处理；公共的header值

请求后需要做：返回的状态码做处理、一些服务端的错误

封装代码：utils>request.js中

import axios from 'axios'
import config from '../config'
// import router from '../router'

import { ElMessage } from 'element-plus'

const TOKEN_ERROR = 'Token认证失败，请重新登录'
const NETWORK_ERROR = '网络请求异常，请稍后重试一下...'

// 创建axios实例对象，添加一些配置
const service = axios.create({
    baseURL: config.baseApi,
    // 访问接口的超时时间
    timeout: 8000 
})

//添加请求拦截器
service.interceptors.request.use((req) => {
// 一些公共的请求机制
const header = req.headers

if ( !header.Authorization ) header.Authorization = 'Json'
return req
})
// 添加响应拦截器
service.interceptors.response.use(res => {
    // 一些公共的响应机制
    // token的验证
    const { code, data, msg } = res.data

    if( code === 200) {
        return data
    }else if ( code === 40001) {
        ElMessage.error(TOKEN_ERROR)
        // token验证不通过，就返回登录页
        setTimeout(() => {
            router.push('/login')
        },1500)
        // 返回错误提示
        return Promise.reject(TOKEN_ERROR)
    }else {
        ElMessage.error(NETWORK_ERROR)
        return Promise.reject(NETWORK_ERROR)
    }    
})

// 核心的request的函数
function request (options) {
    options.methods = options.methods || 'get'

    if (options.method.toLowerCase() === 'get') {
        // 统一一下 属性是data
        options.params = options.data
    }
    if(typeof options.mock != 'undefined') {
        config.mock = options.mock
    }

    // 非常重要 如果不注意 会出现p0级别的bug
    if (config.env === 'prod') { //如果是生产环境，让所有接口的baseURL是线上接口的API
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }
    return service(options)
}

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})

export default request

全局注册后再使用

main.js中全局注册

import request from './utils/request'

const app = createApp(App)
// 全局注册
app.config.globalProperties.$request = request

Login.vue中使用

 mounted() {
        // 需要先挂载，再能调用
        this.$request({
            method: "get",
            url: "/login",
            data: {
                name: "jason"
            }
        }).then((res) => {
            console.log(res);
        })


       获取数据写法二：（需要二次封装的时候加一段代码）
       this.$request.get("/login",{ name:"jason"}, { mock:true}).then((res) => {
        console.log(res);
    })

    },

获取数据成功