vue-axios网络请求模块封装

---

前言

感谢coderwhy-王红元 老师.
上善若水,泽被后世.

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、常见的网络请求模块,以及优缺点对比.

常见的网络请求模块，以及优缺点对比。
JSONP的原理和封装
JSONP原理回顾
JSONP请求封装
axios的内容详解
认识axios网络模块
发送基本请求
axios创建实例
axios拦截器的使用

vue中发送网络请求如何选择?

选择一:传统的Ajax是基于XMLHttpRequest(XHR)为什么不用它呢?

非常好解释,配置和调用方式等非常混乱.
编码起来看起来就非常蛋疼.
所以真实开发中很少直接使用,而是使用jQuery-Ajax

选择二:在前面的学习中,我们经常会使用jQuery-Ajax

相对于传统的Ajax非常好用.
为什么不选择它呢?
首先,我们先明确一点:在Vue的整个开发中都是不需要使用jQuery了.
那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗?
jQuery的代码:1w+行.
Vue的代码才1w+行.
完全没有必要为了用网络请求就引用用这个重量级的握架;

选择三:官方在Vue1.x的时候推出了Vue-resource.

Vue-resource的体积相对于jQuery小很多.另外Vue-resource是官方推出的.
为什么不选择它呢?
在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本时,也不会再继续更新和维护.对以后的项目开发和维护都存在很大的隐患.

二、axios请求方式

2.1 安装axios

npm install axios --save

2.2axios基本使用

方式一:
代码如下（示例）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";

createApp(App).use(store).use(router).mount('#app')
//默认get请求
axios ({
  url: 'http://123.207.32.32:8000/home/multidata'
}).then( res => {
  console.log(res);
})

该处使用的url网络请求的数据。

2.3 axios-发送并请求 处理并发请求

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";

createApp(App).use(store).use(router).mount('#app')


//axios-发送并请求  处理并发请求
axios.all([axios({
  url: 'httpbin.org'
}), axios({
  url: 'httpbin.org',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(results => {
  console.log(results)
})

2.4 axios全局配置

在上面的示例中,我们的BaseURL是固定的
事实上,在开发中可能很多参数都是固定的且多次调用的.
这个时候我们可以进行一些抽取,也可以利用axios的全局配置

代码示例-全局配置baseURL,timeout:

axios.defaults.baseURL ='httpbin.org'
axios.defaults.timeout = 5000

2.5 axios的实例和封装

避免过度依赖第三方框架.

import axios from "axios";

export function request(config) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL: 'httpbin.org',
    timeout: 5000
  })

  //发送网络请求
  return instance(config)
}

2.6 axios的拦截器使用

import axios from "axios";
import { ElMessage } from 'element-plus'
import { pa } from "element-plus/es/locale";
import router from '../router/index'
// 统一封装axios请求. 统一拦截判断后端响应信息进行统一处理.
// 避免了在每一个调后端接口的地方重复写axios框架和信息判断



// 响应拦截器
// success 指有效调用后端接口.不管业务逻辑
axios.interceptors.response.use(success => {
    // http协议默认调到接口时状态码为200
    if (success.status && success.status == 200) {
        if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
            // 提示 后端返回的响应信息
            ElMessage.error({ message: success.data.message })
            return;
        }
        if (success.data.message) {
            ElMessage.success({ message: success.data.message })
        }
    }
    return success.data;
}, error => {
    if (error.response.code == 504 || error.response.code == 404) {
        ElMessage.error({ message: '服务器被吃了( ╯□╰ )' })
    } else if (error.response.code == 403) {
        ElMessage.error({ message: '权限不足,请联系管理员!' })
    } else if (error.response.code == 401) {
        ElMessage.error({ message: '尚未登陆,请登录!' })
        router.replace("/")
    } else {
        if (error.response.data.message) {
            ElMessage.error({ message: error.response.data.message });
        } else {
            ElMessage.error({ message: '未知错误!' })
        }
    }
    return;
})


// 预留项目前缀名
let base = '';
// 统一封装post请求
export const postRequest(url, params) => {
    return axios({
        method: 'post',
        url: base + `${url}`,
        data: params
    })
}

---

总结

本文对axios做了简单使用总结.他是基于ajax封装完成的.